CSS布局

div 标签 div 与其它标签一样，也是一个XHTML所支持的标签。 div 是XHTML中指定的，专门用于布局设计的容器标签。

说明：在css布局方式中，div 是这种布局方式的核心对象，我们的页面排版不再依赖于表格，仅从div的使用上说，做一个简单的布局只需要两样东西：div 与 css.因此我们称这种布局方式为 div + css 布局。

例：<div id="header">页面头部</div><div id="content"> <div id="left"></div> <div id="right"></div></div><div id="footer">页脚</div>

display 元素显示模式 block | none | inline | inline-block 

说明：display  属性用来设置元素的显示方式。block 块对象指的是元素显示为一个方块，默认显示状态下将占据整行，其它的元素只能另起一行显示。inline 行间对象与block刚好相反，它允许其它元素在同一行显示。none 隐藏对象

例：div{display:block}

float 元素的浮动 none | left | right 

说明：用来控制元素是否浮动显示。

left 向左浮动

right 向右浮动

none 不浮动 

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

例:div{ float:left;}

position 元素的定位 static | absolute | fixed | relative 

说明：static : 无定位，默认值

absolute：绝对定位

relative ： 相对定位

fixed：固定定位

absolute 说明：

脱离文档流。

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

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

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

relative 说明：

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

不脱离文档流

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

fixed 说明：固定定位实际上只是绝对定位的特殊形式；固定定位的元素是相对于浏览器窗口而固定，而不是相对于其包含元素；即使页面滚动了，它们仍然会处在浏览器窗口中跟原来完全一样的地方。

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

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

z-index 元素的层叠关系 auto | number 

说明 ：当元素发生重叠时，可以通过 z-index 属性，设置其层叠的先后顺序。较大 number 值的对象会覆盖在较小 number 值的对象之上。

例:div { z-index:1}