第7章 布局(一)

CSS 的主要好处之一是,它能够控制页面布局而不需要使用表现性标签。但是,CSS布局被误认为是难以理解的,在初学者中,这种想法尤其普遍。这在一定程度上是由于浏览器的不一致造成的,但主要原因是 Web 上不同布局技术的数量激增所致。似乎每个 CSS 作者都用自己的技术创建多列的布局,而且新的 CSS 开发人员常常使用一种技术却不真正了解它的工作原理。这种进行 CSS 布局的 "黑盒" 方法可能会迅速地得到想要的结果,但是最终会阻碍开发人员理解这种语言。

所有 CSS 布局技术都依赖于三个基本概念:定位、浮动和空白边操纵。不同的技术其实没有本质的差异,而且如果理解了核心概念,那么创建自己的布局是相当容易的。

在本章中,你将学习:

  • 让设计在页面中水平居中。
  • 创建两列和三列的基于浮动的布局。
  • 创建固定宽度、流体和弹性布局。
  • 将列拉长到整个可用空间的高度。

7.1 让设计居中

长文本行难以阅读。随着现代显示器的尺寸越来越大,屏幕可读性问题变得越来越重要。缓解这个问题的一种方法是让设计居中。居中的设计只占据屏幕的一部分,而不是横跨屏幕的整个宽度,这样就会创建比较短的容易阅读的行。
居中的设计目前非常时髦,所以如何在 CSS 中让设计居中是大多数开发人员首先要学习的主题之一。让设计居中有两个基本方法:一个方法使用自动空白边,另一个方法使用定位和负值的空白边。

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

假设有一个典型的布局,希望让其中的容器 div 在屏幕上水平居中:
<body>
<div id="wrapper"></div>
</body>
为此,只需要定义容器 div 的宽度,然后将水平空白边设置为 auto:
#wrapper {
width: 720px;
margin: 0 auto;
}
在这个示例中,我决定以像素为单位指定容器 div 的宽度,让它适合 800X600 分辨率的屏幕。但是,也可以将宽度设置为主体的百分数,或者使用 em 相对于文本字号设置宽度。
这在所有现代浏览器中都是有效的。但是,怪异模式中的 IE5.x 和 IE6 不支持自动空白边。
幸运的是,******IE 将 text-align:center 误解为让所有东西居中,而不只是文本。******
可以利用这一点,方法是让主体标签中的所有东西居中,包括容器 div,然后将容器的内容重新对准左边:
body {
text-align: center;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
以这种方式使用 text-align 属性是一种招数,但是这个招数是无害的,对代码没有严重的影响。容器现在在 IE 以及比较符合标准的浏览器中都会居中 (见图 7-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)。



发布了0 篇原创文章 · 获赞 1 · 访问量 5万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章