CSS——布局模型

1.三种布局模型：

　　流动模型Flow

　　浮动模型Float

　　层模型Layer

2.流动模型：

　　默认布局模式。

特点：

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

　　内联元素都会在所处的包含元素内从左到右水平分布显示，如a、span、em、strong。

 

3.浮动模型：

　　让块状元素并排显示的方式。

float: left、right

xxx{float:left;}

 

4.层模型：

　　让元素在网页中精确定位的方式。

>三种形式：

　　绝对定位(absolute)、相对定位(relative)、固定定位(fixed)

1>绝对定位：

position: absolute

使元素脱离文档流，然后使用left、righ、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

2>相对定位：

position: relative

通过lef等属性确定元素在正常文档流中的偏移位置。左上角为坐标原点。

元素偏移，但是偏移前的位置保留不动，覆盖不了前面的div没有偏移前的位置。

3>固定定位：

position: fixed

和absolute类似，但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。

由于视图本身是固定的，不会随浏览器窗口的滚动条滚动而变化。

除非屏幕中移动浏览器窗口的屏幕位置，或者改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

>relative和absolute组合使用：父元素是relative/absolute，定位元素使用absolute。