css布局模型

css包括3种基本的布局模型，即flow，layer，float。

在网页中元素有三种布局模型：

1.流动模型（float）

2.浮动模型（float）

3.层模型（layer）

下面分别介绍下这三种模型究竟是什么布局？

1.流动模型：流动是默认的网页布局模式，也就是说网页在默认状态下的html网页元素都是根据流动模型来分布网页内容的。

流动模型具有两个比较典型的特征：

1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素为100%，实际上，块状元素都会以行的形式占据位置。

2.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

块状元素这么霸道的独占一行，那么问题来了，如果我们想让两个块状元素并排显示，该怎么办呢？不要捉急，设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的，但可以用css定义为浮动。

3.层模型

什么是层布局模型？层布局模型就像ps中的图层编辑功能一样，每个图层能够精确定位操作。

层模型有三种形式：

1.绝对定位（position：absolute）：将元素从文档流中拖出来，使用left，right，top，bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在 该包含快，则相对于body元素，即浏览器窗口。

2.相对定位（position：relative）：它通过left，right，top，bottom属性确定在正常文档流中的偏移位置。相对定位完成的过程中首先按照static（float）方式生成一个元素（并且元素像层一样的浮动起来），然后相对于以前的位置移动，移动的方向和幅度由left，right，top，bottom属性确定，偏移前的位置保留不动。

3.固定定位（position：fixed）：固定定位相对移动的坐标是视图（屏幕内的网页窗口）本身，由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。