css - position：relative;在这个例子中这么用是为什么？
本文介绍了css - position：relative;在这个例子中这么用是为什么？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta keywords="HTML5 Web" />
<meta content="个人简历网页的实现" />
<title>个人简历网页的实现</title>
<style type="text/css">
/*基本样式*/
* {
margin: 0;
padding: 0;
}
body {
font-family: "Microsoft YaHei UI";/*这个好像不起作用*/
line-height: 24px;/*这里是想统一下各个元素的行高吗？*/
background-color: #f3f3f3;
color: #444;
height: 100%;/*这里为什么要写height: 100%;width: auto;*/
width: auto;
}
#wrapper {
max-width: 700px;
position: relative;/*这里为什么要用个Position：relative,好像不用的话也可以让Wrapper在想要的位置？？*/
margin: 40px auto 30px;
padding: 60px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
ul {
margin: 0 0 0 15px;/*怎么知道要像左移动15px，而不是30px，是自己慢慢调整，然后确定的吗？*/
position: relative;/*为什么又要写这个position: relative;*/
}
li {
margin: 0 0 5px 0;
font-size: 13px;
}
p {
text-align: justify;
font-size: 13px;
}
.clear {
clear: both;
}/*为什么每个div后面都要clear啊？？*/
a {
color: #444;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}/*body里面好像没有a元素，是例子写错了吗？*/
h1,h2,h3,h4,h5 {
font-weight: normal;
}
h3 {
font-weight: bold;
font-size: 14px
}
h2.section-head {
clear: both;/*这里clear：both是做什么*/
font-weight: bold;
margin: 60px -60px;/*这里是上下左右都是60px，为什么不设定左和下就好了？*/
border-left: 52px solid #444;
color: #444;
padding: 1px 0 0 8px;/*为什么要设置内边距啊？*/
position: relative;/*这里position: relative是做什么*/
}
/*个人简介*/
#bio {
position: relative;
}/*为什么又设置position: relative;*/
#bio #avatar {
float: left; margin: 0 20px 0 0;
}/*#avatar是什么？？？*/
#bio h2 {
font-size: 15px;
}
#bio p {
clear: left; /*为什么要clear：left？*/
margin:40px auto;
padding:40px 45px;
max-width: 560px;
background: #fbfbfb;
border: 1px solid #f3f3f3;
border-radius: 8px;
position: relative; /*关于position 定位，不明白为什么要写？*/
border-width: 0 1px 1px;
border-color: #fff #f3f3f3 #e8e8e8;
line-height: 1.6em;
}
#honorsAwards li {
padding-left: 5px;
margin-bottom: 8px;
}
ul#skills,ul#jobs,ul#schools,ul#recommends,ul#seenOn {
margin: 0;
list-style: none;
}
ul#skills li,
ul#jobs li,
ul#schools li,
ul#recommends li {
margin: 0 0 20px 0;
clear: both;/*clear both又是为了什么？？*/
}
ul#skills .details,ul#skills .details,ul#jobs li .details,ul#schools li .details,ul#recommends li .details {
float: left;
width: 40%;
margin-bottom:25px;
}
ul#jobs li p,ul#skills li > p,ul#schools li > p,ul#recommends li > p {
float: right;
width: 57%;
margin-bottom: 25px;
}
.details h5 {
font-style: italic;
}
</style>
</head>
<body>
<div id="wrapper">
<!--个人简介-->
<h2 id="titleName" class="section-head">张天</h2>
<div id="bio">
<h2>Web前端开发工程师、网页设计师</h2>
<p>我叫张天，男，今年28岁，毕业于河南大学计算机科学与技术学院，主修计算机科学与技术，精通HTML 5、CSS 3、jQuery、JavaScript,熟练使用各种Web开发和设计工具，了解基本的PHP。</p>
</div>
<div class="clear"></div>
<!--个人技能-->
<h2 id="tools" class="section-head">个人技能</h2>
<ul id="skills">
<li>
<div class="details">
<h3>HTML 5 + CSS 3</h3>
</div>
<p>精通并熟练使用</p>
</li>
<li>
<div class="details">
<h3>JavaScript</h3>
</div>
<p>精通并熟练使用</p>
</li>
<li>
<div class="details">
<h3>jQuery</h3>
</div>
<p>精通并熟练使用</p>
</li>
</ul>
<div class="clear"></div>
<!--工作经验-->
<h2 id="clock" class="section-head">工作经验</h2>
<ul id="jobs">
<li>
<div class="details">
<h3>XX科技有限公司</h3>
<h4>Web前端开发工程师</h4>
<h5>2013.09 - 2015.06</h5>
</div>
<p>利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。</p>
</li>
<li>
<div class="details">
<h3>XX信息公司</h3>
<h4>Web前端开发工程师、Web前端设计师</h4>
<h5>2011.07 - 2013.08</h5>
</div>
<p>开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。</p>
</li>
</ul>
<div class="clear"></div>
<!--教育背景-->
<h2 id="learn" class="section-head">教育背景</h2>
<ul id="schools">
<li>
<div class="details">
<h3>河南中医药大学</h3>
<h4>计算机科学与技术专业</h4>
<h5>2007.06 - 2011.06</h5>
</div>
<p>主要学习高等数学、线性代数、概率论与数理统计、离散数学、组合数学、计算机原理、人工智能、程序设计基础、面向对象程序设计、数字逻辑电路、模拟电子技术、数据结构、算法设计、WEB程序设计、计算机组成与结构、操作系统、数据库系统原理、编译原理、计算机网络、网络工程、软件工程、数据库应用、信息安全、微型计算机技术、汇编语言、单片机技术、嵌入式系统、嵌入式操作系统、嵌入式设计与应用、移动设备应用软件开发等。</p>
</li>
</ul>
<div class="clear"></div>
<!--获得荣誉-->
<h2 id="ribbon" class="section-head">获得荣誉</h2>
<ul id="honorsAwards">
<li>CET-6英语六级，优秀的听说写能力</li>
<li>河南省教育教学信息化大奖赛一等奖</li>
<li>电子商务设计师</li>
<li>平面设计师</li>
</ul>
</div>
</body>
</html>解决方案
有些浏览器会默认给body加上relative，所以有些即使删除了代码，依然不影响界面，不过还是建议加上。clear：both；是清楚浮动用的。建议您还是多了解一下html。看这个代码感觉有些老旧，没有啥养眼的布局和效果。不太值得借鉴
这篇关于css - position：relative;在这个例子中这么用是为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
