1.流动模型
流动（Flow）是默认的网页布局模式。流动布局的特征：
- 块状元素会在所处的包含元素内自上而下按顺序垂直延伸分布，因为再默认状态下，块状元素的宽度都为100%，以行的形式占据位置。
- 在流动模式下，内联元素都会在所处的包含元素内从左到右平均分布显示。
2.浮动模式
div{
float:left;
}
3.层模型
层模型的三种形式：
-
绝对定位（absolute）
如果想为元素设置层模型中的绝对定位，需要设置
position:absolute，这条语句的作用将元素从文档流中拖出来，然后使用left/right/top/bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
div{
background-color: #00ffff;
width:1000px;
height: 100px;
}
#div2 {
position: absolute;
left:80px;
top:50px;
}
<div id="div1">原来的样子</div>
<div id="div2">绝对定位之后</div>
如上代码执行后的效果：
上面的#div2，是相对于body进行的绝对定位。
-
相对定位(relative)
相对定位完成的过程是首先按static(float)方式生成一个元素（并且元素像层一样浮动起来），然后相对于以前的位置移动，移动的方向和幅度由
left,right,top,bottom属性确定，偏移前的位置保留不动。div{ background-color: #00ffff; width:1000px; height: 100px; } #div2 { position: absolute; left:80px; top:50px; } #div3 { position: relative; left:200px; top:50px; }<div id="div1">原来的样子</div> <div id="div2">绝对定位之后</div> <div id="div3">相对定位</div> <span>偏移前的依然被占用</span>如上代码执行结果：
绝对定位是相对于上一个具有定位性质的父体，上面的例子是相对于body,也就是#div2没有偏移的话，absolute之后，位置就跟#div1是重合的。
但是相对定位是与自己本来位置的偏移，如上图，本来位置用红色框表示出来，偏移之后，原来的位置依然保持占用。
-
固定定位(fixed)
与absolute定位类型类似，但他的相对移动的坐标是视图（屏幕内的网页窗口）本身。
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小
如上代码执行的结果：
移动滚动条之后：
如上图，#div4固定位置是根据整个视图，而不是根据body或者其他参考对象。
-
绝对定位和相对定位一起使用
position:absolute可以实现被设置元素相对于浏览器(body)设置定位，也可以相对于其他元素。但是需要遵循以下规范：-
参照定位的元素必须是相对定位元素的前辈元素：
<div id="div1"> <div id="div2"> 内容 </div> </div>如上，div2是div1的子元素，所以div1是div2的前辈元素。
-
参照定位的元素必须加入
position:relative#div1{ width:100px; height:50px; position:relative; } -
定位元素加入
position:absolute#div2{ width:100px; position:absolute; left:20px; top:10px; }
-
