CSS布局方式

1.居中的布局设计：使用自动空白边让设计居中和使用定位和负值空白边让设计居中

方法一：使用自动空白边让设计居中

(只需定义DIV的宽度，然后将水平空白边设置auto)

#box{

width:720px;

margin:0 auto;

}

缺点：这样的样式几乎在所有浏览器中都是有效的，但是IE5系列版本和IE6不支持自动空白边，因为IE将text-align:center;理解为让所有对象居中，而不只是文本居中，可以利用这一点，将主体标签中的所有对象都居中，然后将容器中的内容重新左对齐。

所以，最后的居中代码如下：

body{

text-align:center;

}

#box{

width:720px;

height:600px;

margin:0 auto;

text-align:left;

border:solid 2px red;

}

注：一般在实际设计页面时不会设置主容器的高度，而让容器的高度随内容自动增加，这里设置只是为了增强显示效果。

2.使用定位和负值空白边让设计居中

#box{

width:720px;

height:600px;

position:relative;

left:50%;//容器的左边缘居中

margin-left:-360px;//使容器的中间居中

}

浮动的布局设计（见浮动的布局设计文件夹下的5个html文件）

使用浮动技术设计页面布局通常包括5种方式，即两列固定宽度布局（设置这两个容器都向左浮动）、两列固定宽度居中布局（设置这两个容器都向左浮动并且父级容器margin：0 auto）、两列宽度自适应布局（自适应主要通过百分比值设置）、两列右列宽度自适应布局（只需设置左栏的宽度，右栏不设置任何宽度值）、三列浮动中间宽度自适应布局（左栏固定宽度向左显示，右栏固定宽度居右显示，而中间根据左右栏自动适应在中间显示。通过绝对定位实现）。