CSS最后阶段

display(元素显示模式)

语法：

display : block | none | inline | inline-block

display  属性用来设置元素的显示方式。

block        块对象指的是元素显示为一个方块，默认显示状态下将占据整行，其它的元素只能另起一行显示。

inline        行间对象与block刚好相反，它允许其它元素在同一行显示。

none        隐藏对象

例：

div{display:block}

float（元素的浮动）

语法：

float : none | left | right

left  向左浮动

right         向右浮动

none        不浮动

说明：

浮动的时候元素的显示属性也变化了 变为 “行内元素”

例:

div{ float:left;}

清除浮动

语法：

clear : none | left | right | both

说明：

none :默认值。允许两边都可以有浮动对象

left :不允许左边有浮动对象

right: 不允许右边有浮动对象

both :不允许有浮动对象

例：

div { clear:both}

position(元素的定位)

语法：

position : static | absolute | fixed | relative

static : 无定位，默认值

absolute：绝对定位

relative ： 相对定位

fixed：固定定位

absolute 说明：

l  脱离文档流。

l  通过 top,bottom,left,right 定位。

l  如果父元素 position 为 static 时，将以body坐标原点进行定位。

l  如果父元素 position 为 relative  时，将以父元素进行定位。

例：

div { position:absolute; left:100px; top:100px;}

relative说明：

l  相对定位（相对自己原来的位置而言）

l  不脱离文档流

l  参考自身静态位置通过 top,bottom,left,right 定位。

例：

div { position: relative; left:100px; top:100px;}

fixed说明：

固定定位实际上只是绝对定位的特殊形式；固定定位的元素是相对于浏览器窗口而固定，

而不是相对于其包含元素；即使页面滚动了，它们仍然会处在浏览器窗口中跟原来完全一

样的地方。

例：

div { position: fixed; right:0; bottom:0;}

z-index(元素的层叠关系）

当元素发生重叠时，可以通过 z-index 属性，设置其层叠的先后顺序。

较大 number 值的对象会覆盖在较小 number 值的对象之上。

语法：

z-index : auto | number

例子:

div { z-index:1}