前端之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也可以设置负值，设为负值时，在所有元素之下