Css布局

若生安饶 2010-03-25

展开全文

使用自动空白边让设计居中

设计居中有两个基本方法: 一个方法使用自动空白边，另一个方法使用定位和负值的空白边。
到目前为止，使用自动空白边进行居中的方法是最常用的
例：<head runat="server">
    <title></title>
    <style type="text/css">
    #Test//id选择器
    {
        width:720px;
        margin:0px auto;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="Test">

    </div>
    </form>
</body>
这在所有现代浏览器中都是有效的。但是，怪异模式中的IE 5.x和IE 6不支持自动空白边。幸运的是IE将text-align: center误解为让所有东西居中，而不只是文本。可以利用这一点，方法是让主体标签中
的所有东西居中，包括容器div，然后将容器的内容重新对准左边。为了让这个方法在所有浏览器中都能够顺利地工作，需要做最后一件事情。在Netscape 6中，当浏览器窗口的宽度减少到小于容器的宽度时，容器的左边会跑到屏幕的外边，就无法访问它了
body {
text-align: center;
min-width: 760px;
}
#wraPper {
width: 720px;
margin: 0 auto;
text-align: left;
}
但是，并不希望让容器的左边缘居中，而是希望让容器的中间居中。实现的方法是对容器的左边应用一
个负值的空白边，宽度等于容器宽度的一半儿。这会把容器向左边移动它的宽度的一半，从而让它在屏幕上
居中:
#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
基于浮动的布局
因为浮动的元素不再占据文档流中的任何空间，它们就不再对包围它们的块框产生任何影响。为了解决
这个问题，需要对布局中各个点上的浮动元素进行清理。非常常见的做法是，不对元素进行连续地浮动和清
理，而是浮动几乎所有东西，然后在整个文档的“战略点”(比如页脚)上进行一次或两次清理。
两列的浮动布局
例：
只需为每个列设置想要的宽度，然后将导航向左浮动，将
内容向右浮动:
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
然后, 为了确保页脚正确地定位在这两个浮动元素的下面，需要清理页脚:
#footer {
clear: both;
}

<div id=“content”>
内容区
    </div>
<div id=“mainNav”>
导航区
    </div>
<div id=“footer”>
结尾区
    </div>
</div>
还需要做一些小调整以便让布局更有条理。首先。导航区域中的内容一直顶到
容器的边缘上，这不太好看，需要留出点儿空间。可以直接在导航元素上添加水平填充
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
}
#mainNav li {
padding-left: 20px;
padding-right: 20px;
}
#content hl，#content h2,#content p {
padding-right: 20px;
}
三列的浮动布局