前端之CSS布局模型

一、css布局模型：

　　流动模型（Flow）

　　浮动模型（Float）

　　层模型（Layer）

1、流动模型：

页面在没有设置任何css样式，元素按照本身的特性在浏览器中显示，这样的布局模型称为流动模型；

2、浮动模型：

①.浮动属性

float:none(默认值，不浮动)|left(左浮动)|right(右浮动);

②.清除浮动

clear:none|both|left|right;

　　none:默认值，允许两边有浮动

　　both:清除左浮动和右浮动

　　left:清除左浮动

　　right:清除右浮动

注：当本元素前面有元素浮动对本元素造成了影响，给本元素添加清除浮

在网页中使用float属性进行页面布局；

当元素设置了float属性后，就脱离了正常的文档流；

3、层模型：

position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);

①.绝对定位（absolute）

绝对定位的参照物：

a）是绝对定位元素的父包含块（参照物与绝对定位元素是包含与被包含的关系）；

b) 父包含块必须具有position定位属性：

如果找不到满足以上两个条件的父包含块，那么相对于html，即浏览器窗口进行绝对定位

注：以下两种情况，元素会脱离正常的文档流，左右margin为auto将会失效

1）当元素设置了float属性

2）当元素设置了绝对定位

②.相对定位(relative)

相对定位的参照物：

相对于偏移前的位置进行定位

相对定位不会脱离正常的文档流

注：relative和absolute结合使用

给父元素设置relative,给子元素设置absolute,在网页布局中常这样结合使用制作一些特殊效果

③.固定定位（fixed）

固定定位的参照物：屏幕窗口

注：a）固定定位的元素也会脱离正常的文档流

　 b）固定定位的元素不随滚动条滚动

④、定位层叠属性设置：

z-index:auto|数值（一般为整数）;

注：a）当没有设置z-index属性时，后写的元素优先显示在上层，设置后，数值越大，越靠上

b) z-index也可以设置负值，设为负值时，在所有元素之下