CSS 的主要好处之一是,它能够控制页面布局而不需要使用表现性标签。但是,CSS布局被误认为是难以理解的,在初学者中,这种想法尤其普遍。这在一定程度上是由于浏览器的不一致造成的,但主要原因是 Web 上不同布局技术的数量激增所致。似乎每个 CSS 作者都用自己的技术创建多列的布局,而且新的 CSS 开发人员常常使用一种技术却不真正了解它的工作原理。这种进行 CSS 布局的 "黑盒" 方法可能会迅速地得到想要的结果,但是最终会阻碍开发人员理解这种语言。
所有 CSS 布局技术都依赖于三个基本概念:定位、浮动和空白边操纵。不同的技术其实没有本质的差异,而且如果理解了核心概念,那么创建自己的布局是相当容易的。
在本章中,你将学习:
- 让设计在页面中水平居中。
- 创建两列和三列的基于浮动的布局。
- 创建固定宽度、流体和弹性布局。
- 将列拉长到整个可用空间的高度。
7.1 让设计居中
7.1.1 使用自动空白边让设计居中
为了让这个方法在所有浏览器中都能够顺利地工作,需要做最后一件事情。在 Netscape 6 中,当浏览器窗口的宽度减少到小于容器的宽度时,容器的左边会跑到屏幕的外边,就无法访问它了。为了防止这种现象,需要将主体元素的最小宽度设置为等于或略大于容器元素的宽度:
body {
text-align: center;
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
现在,如果试图将窗口的宽度减少到小于容器 div 的宽度,就会出现滚动条,使用户能够访问所有内容。
7.1.2 使用定位和负值空白边让设计居中
到目前为止,使用自动空白边进行居中的方法是最常用的,但是它需要用一个招数来满足 IE5.x 的要求。它还要求对两个元素而不只是一个元素应用样式。因此,有些人喜欢使用定位和负值空白边来代替这种方法。
与前面一样,首先定义容器的宽度。然后将容器的 position属性设置为 relative ,将 left 属性设置为 50%。这会把容器的左边缘定位在页面的中间。
#wrapper {
width: 720px;
position: relative;
left: 50%;
}
但是,并不希望让容器的左边缘居中,而是希望让容器的中间居中。实现的方法是对容器的左边应用一个负值的空白边,宽度等于容器宽度的一半儿。这会把容器向左边移动它的宽度的一半,从而让它在屏幕上居中:
#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
选择使用哪种居中技术是个人喜好问题。但是,同时掌握多种技术总是有好处的,因为不知道什么时候某种技术正好合适。
7.2 基于浮动的布局
用CSS 进行布局有几种不同的方式,包括绝对定位和使用负值空白边。我发现基于浮动的布局是最容易使用的方法。顾名思义,在基于浮动的布局中,只需设置希望定位的元素的宽度,然后将它们向左或向右浮动。
因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围它们的块框产生任何影响。为了解决这个问题,需要对布局中各个点上的浮动元素进行清理。非常常见的做法是,不对元素进行连续地浮动和清理,而是浮动几乎所有东西,然后在这个文档的 "战略点" (比如页脚) 上进行一次或两次清理。
7.2.1 两列的浮动布局
要想使用浮动创建简单的两列布局,首先需要有一个基本的 (X)HTML 框架。在下面的示例中,(X)HTML 由品牌区域、内容区域、主导航区域和最后的页脚组成。整个设计包围在一个容器 div 中,这个div 使用前面介绍的方法之一进行水平居中:
这个设计的主导航区域将位于页面的左边,内容位于右边。但是,为了易用性和可访问性,在源代码中将内容区域放在导航的前面。首先,主内容是页面上最重要的东西,所以在文档中应该先出现。其次,这样可以方便屏幕阅读器用户,他们用不着经过可能很长的链接列表才找到内容部分。
在创建基于浮动的布局时,一般将两列都向左浮动,然后使用空白边或填充在两列之间创建一个隔离带。在使用这种方法时,列在可用空间内包得很紧,没有喘息的空间。如果浏览器表现良好的话,那么这不是问题;但是差劲的浏览器会打乱紧密的布局,迫使一列退到另一列的下面。
在 IE 上就会发生这种情况,因为 IE/Win 考虑元素内容的尺寸,而不是元素本身的尺寸。在符合标准的浏览器中,如果元素的内容太大,它只会超出框之外。但是,在 IE/Win 上,如果元素的内容太大,整个元素就会扩展。如果这发生在非常紧密的布局中,那么就没有足够的空间可以让元素并排出现,浮动元素之一就会退到下面去。
*****其他IE bug (比如 3像素文本偏移 bug 和双空白边浮动 bug ,见第9章) 也会导致浮动元素下降。******
为了防止发生这种情况,需要避免浮动布局在包含它们的元素中太挤。可以不使用水平空白边或填充来建立隔离带,而是将一个元素向左浮动,另一个元素向右浮动,从而创建视觉上的隔离 (见图 7-2)。如果一个元素的尺寸意外地增加了几个像素,那么它不会立刻占满水平空间并下降,而只是扩展到视觉隔离带中。
实现这个布局的 CSS 非常简单。只需为每个列设置想要的宽度,然后将导航向左浮动,将内容向右浮动:
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
然后,为了确保页脚正确地定位在这两个浮动元素的下面,需要清理页脚:
#footer {
clear: both;
}
基本的布局现在完成了。还需要做一些小调整以便让布局更有条理。首先,导航区域中的内容一直顶到容器的边缘上,这不太好看,需要留出点儿空间。****可以直接在导航元素上添加水平填充,但是这会调用 IE5.x 专有的框模型。为了避免这种情况,将水平填充添加到导航区域的内容上****:
内容区域的右边也一直顶到容器的右边缘上,也需要留出点儿空间。同样,并不把填充直接应用到元素上,而是把填充应用到内容上,从而避免处理 IE 的框模型问题:
#content h1, #chontent h2, #content p {
padding-right: 20px;
}
现在完成了想要的效果:一个简单的两列CSS布局 (见图 7-3) 。
7.2.2 三列的浮动布局
创建三列布局所需的 HTML 与两列布局的 HTML 非常相似,惟一的差异性是在内容 div 中添加了两个新的 div :一个用于主内容,另一个用于次要内容。
可以使用与两列布局技术相同的 CSS,在已经浮动的内容 div 中,将主内容向左浮动,将次要内容向右浮动 (见图 7-4)。这本质上就是将内容列分成两列,从而形成三列的效果。
与前面一样,所用的 CSS 非常简单。只需设置想要的宽度,然后将主内容向左浮动,将次要内容向右浮动:
#mainContent {
width: 320px;
float: left;
}
#secondaryContent {
width: 180px;
float: right;
}
可以将填充从内容元素上去掉,并且将它们应用于次要内容的内容上,从而让布局显得更有条理:
#secondaryContent h1, #secondaryContent h2, #secondaryContent p {
padding-left: 20px;
padding-right: 20px;
}
这样就形成了一个漂亮的三列布局 (见图 7-5)。