css布局模型

1，清楚了CSS 盒模型的基本概念、 盒模型类型， 咱们就能够深刻探讨网页布局的基本模型了。布局模型与盒模型同样都是 CSS 最基本、 最核心的概念。 但布局模型是创建在盒模型基础之上，又不一样于咱们常说的 CSS 布局样式或 CSS 布局模板。若是说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 
CSS包含3种基本的布局模型，用英文归纳为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
一、流动模型（Flow）
二、浮动模型 (Float)
三、层模型（Layer）

2，流动模型

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

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

3，浮动模型

块状元素这么霸道都是独占一行，若是如今咱们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就能够实现这一愿望。

3,层模型

什么是层布局模型？层布局模型就像是图像软件PhotoShop中很是流行的图层编辑功能同样，每一个图层可以精肯定位操做，但在网页设计领域，因为网页大小的活动性，层布局没能受到热捧。可是在网页上局部使用层布局仍是有其方便之处的。下面咱们来学习一下html中的层布局。

如何让html元素在网页中精肯定位，就像图像软件PhotoShop中的图层同样能够对每一个图层可以精肯定位操做。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

（1）绝对定位(position: absolute)

（2）相对定位(position: relative)

(3)固定定位(position: fixed)