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）：固定定位相对移动的坐标是视图（屏幕内的网页窗口）自己，因为视图自己是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，所以固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。