布局模型

1、流动模型（Flow）

网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的

1-1，块状元素

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸排列，因为在默认状态下，块状元素的宽度都为100%

.div1 {

width: 200px;

}

div,h1,p {

border: 2px solid #00F

}

运行效果：

如图div设置宽度，宽度只能是200px，而h1和p未设置宽度，系统默认占据网页100%的宽度

1-2，内联元素

内联元素都会在所处的包含元素内从左到右水平分布显示

鹅 鹅 鹅

曲项向天歌

白毛浮绿水

红掌拨清波

运行效果：

内联元素从左到右依此显示

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

}

运行效果：

固定定位它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。