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)、两列宽度自适应布局(自适应主要通过百分比值设置)、两列右列宽度自适应布局(只需设置左栏的宽度,右栏不设置任何宽度值)、三列浮动中间宽度自适应布局(左栏固定宽度向左显示,右栏固定宽度居右显示,而中间根据左右栏自动适应在中间显示。通过绝对定位实现)。