1、绝对定位
属性：position
值： absolute
会将该元素从原文档删除，重新给它指定一个位置。（原来的位置就被其他东西占了）
通过指定left,top绝对定位一个元素，绝对定位是基于最近的一个定位了的父容器。
绝对定位可能会造成谁把谁掩盖了的问题，这时候可以使用z-index属性，当z-index的值越大，就表示放上面，z-index:越小就表示放下面。
2、相对定位
相对定位
属性：position
值：relative
与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离。（这样它原来所处的位置还留着空。）
3、浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
属性：float
值： left,right
向右浮动后，原来的“坑”就让出来了，别的会填上来。
并且是在原来的高度的基础上，向右浮动
向左浮动后，也是原来的坑让出来了，那么下面的文字内容就想来占这个坑，但是突然发现 我是向左浮动的，我并没有让出这个坑，于是下面的内容就只有排在我的右边了。
利用上面的这一点可以让文字在右边围绕着图片。
若不想要围绕着浮动的元素，可以把上来占位的元素设置clear:left属性
还有！ div标签默认是换行的
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果
div#floatingDiv div{
float:left;
}4、显示方式
| display:none | 隐藏 |
隐藏起来，不占原来的位置 |
| display:block | 块级 |
自动换行，而且width和height能生效 |
| display:inline | 内联 |
没有换行，而且width和height不会生效 |
| display:inline-block | 内联-块级 |
需要同一行，并且还能指定大小 |
5、水平居中
内容居中有两种法：
①：设置align=“center”属性
②：设置样式text-align：center
元素居中：
比如div标签一样的块元素，默认100%的宽度，就无法居中，但是若是设置了宽度，再使用样式margin：0 auto就可以居中
但如果是内联元素，无法设置宽度，就不能通过margin：0 auto来居中。
6、左侧固定
<style>
.left{
width:200px;
float:left;
background-color:pink
}
.right{
overflow:hidden;
background-color:lightskyblue;
}
</style>
<div class="left">左边固定宽度</div>
<div class="right">右边自动填满</div>
左右固定，填充中间，也是同样的方法，利用overflow去掉中间元素的溢出实现自适应。
6、垂直居中
就是在一个元素内将内部内容垂直居中，可以用样式line-height设置个值来垂直居中。
也可以通过设置上下相同的内边距来实现垂直居中效果。padding : 30 0
7、贴在下方
需要把一个内层元素设置成绝对定位，然后设置bottom：0就行了，无论怎样都贴在下面。
练习：
实现如图：
<style type="text/css">
body{
font-family:"宋体";
font-size:13px;
color:#666666;
width:643px;
}
#shang{
padding: 5 0;
position: relative;
height: 30px;
}
#zuoshang{
float: left;
}
#sz{
float: right;
}
#youshang{
float: right;
}
.underline{
position: absolute;
bottom: 0;
width: 100%;
border-bottom-color: AAAAAA;
border-bottom-style: solid;
border-bottom-width: 2px;
}
#xia{
top: 20px;
height: 230px;
position: relative;
}
#zuo{
float: left;
width: 50px;
height: 200px;
}
.chaolian{
text-decoration: none;
}
#cha{
float: right;
}
#renshu{
position: absolute;
top: 42px;
left: 7px;
color: AAAAAA;
}
#two{
font:normal bold 微软雅黑;
color: rgb(0,0,245);
margin-bottom: 10px;
}
#three{
margin-bottom: 10px;
}
#qixie{
float: left;
}
#text{
font-size: 120%;
}
</style>
<body>
<div id="shang">
<img id="zuoshang" src="C:/Users/msi-/Desktop/work/img/1.png">
<span>最新动态</span>
<span id="sz">设置</span>
<img id="youshang" src="C:/Users/msi-/Desktop/work/img/2.png">
<div class="underline"></div>
</div>
<div id="xia">
<div id="zuo">
<img src="C:/Users/msi-/Desktop/work/img/4.png">
<br>
<img src="C:/Users/msi-/Desktop/work/img/5.png">
<span id="renshu">6657</span>
</div>
<div id="you">
<div id="one">
热门回答，来自 机械
<a class="chaolian" href="#">关注话题</a>
<img id="cha" src="C:/Users/msi-/Desktop/work/img/3.png">
</div>
<div id="two">
人类史上令人叹为观止的极限精度制造成果有哪些？
</div>
<div id="three">
<b>Vincent Fu</b>, Materials Science,PhD
</div>
<img id="qixie" src="C:/Users/msi-/Desktop/work/img/6.png">
<p id="text">
说到精度，就不得不提在材料学中最重要的一个方面：表征。要项研究一种材料性能，握在手里把玩时远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），如果要获得更深...<a class="chaolian"href="#">显示全部</a>
<div id="four">
<img class="lasttu" src="C:/Users/msi-/Desktop/work/img/7.png">
<span>关注问题</span>
<img class="lasttu" src="C:/Users/msi-/Desktop/work/img/8.png">
<span>867条评论</span>
<img class="lasttu" src="C:/Users/msi-/Desktop/work/img/9.png">
<span>作者保留权利</span>
</div>
</div>
<div class="underline"></div>
</div>
</body>
