1、流动模型（Flow）
网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的
1-1，块状元素
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸排列，因为在默认状态下，块状元素的宽度都为100%
.div1 {
width: 200px;
}
div,h1,p {
border: 2px solid #00F
}
运行效果：
如图div设置宽度，宽度只能是200px，而h1和p未设置宽度，系统默认占据网页100%的宽度
1-2，内联元素
内联元素都会在所处的包含元素内从左到右水平分布显示
<a href=" ">鹅 鹅 鹅</a>
<q>曲项向天歌</q>
<span>白毛浮绿水</span>
<em>红掌拨清波</em>
运行效果：
2、浮动模型 (Float)
任何元素在默认情况下是不能浮动的，但可以用 float：定义浮动，
div、p、table、img 等元素都能被定义为浮动
div {
width: 200px;
height: 150px;
border: 2px solid #00F;
float: left;
}
运行效果：
三个div都居左浮动（float：left），右左浮动必然有右浮动：float：right；
3、层模型（Layer）
1、绝对定位(position: absolute)
div {
background-color: #aaa;
width: 200px;
height: 200px;
position: absolute;
left: 200px;
top: 100px
}
运行效果：
将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
上图不存在包含块，于是相对于浏览器窗口绝对定位！距左(left) 200px;距顶(top) 100px
2、相对定位(position: relative)
通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
div {
background-color: #aaa;
width: 200px;
height: 200px;
position: relative;
left: 200px;
top: 100px
}
运行效果：
相对定位前的运行效果：
从两组运行效果可直观的看出，相对于以前的位置移动后，偏移前的位置保留不动
3、固定定位(position: fixed)
div {
background-color: #aaa;
width: 200px;
height: 200px;
position: fixed;
left: 200px;
top: 100px
}
运行效果：
固定定位它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
