CSS布局模型

第 6 章 CSS 布局模型

在多年的表格布局与标准布局之争后， 以 XHTML+CSS 为标准的布局不断得到多数设计师的认 可。标准布局的优势不言而喻，但我们依然能够在网上看见不同的声音和非议。XHTML+CSS 被误 解是可以理解的，想到初学者要驾驭个性各异的浏览器，同时在冰冷的代码环境中，需要极高的热 情和极大的想象力来编写这些如同账目似的样式代码，确实存在不小的难度。

但不可否认，时下Web 布局技术的快速普及，每位设计师都可以用 CSS 或半 CSS 技术进行网 页布局。网页设计师常常套用现成的 CSS 布局代码，而对其内在的原理却是一知半解或囫囵吞枣， 所实现的 CSS 布局犹如一个不透明的黑盒子，虽然也能够实现预期效果，但最终阻碍了设计师对 CSS 本质的探究和认识。 6.1 关于 CSS 布局

很多设计师对于 CSS 的认识和实践仅停留在技巧层面上，对于 CSS 布局的核心是什么，实现 XHTML 结构的逻辑体系是什么，如此深奥的理论好像只有系统开发师才去思考，读者还需要认真 思考与理解吗？

实际上要想驾驭 CSS 网页布局技术，这些问题应该想一想，抽象的理论对于思路的梳理具有重 要作用，甚至能够引导你勇闯智慧的迷宫。

所有 CSS 布局技术都应建立在这4 个最基本的概念之上：盒模型、流动、浮动和定位。千变万 化的技巧应用其实都是这些基本概念在舞动，而且如果理解了核心概念的真谛，那么创建 CSS 布局 实际上就是按图索骥了。 

6.1.1 从网友的求帖说起

一天在网上看到这样一个求救帖子： 

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 哪位高手能指点下或给小弟一点 div+css 中的布局、定位的心得？？

一开始做的时候，我把所有的 div 都用 float 属性定位起来布局，就连 header、content、footer 这样的部分也是，（这样做合理吗？）可是后来发现 CSS 中使用 float 很多时会很烦琐，所以后来 就很少用到一些定位的属性，只是需要的时候才用，可是问题又来了。有时候用到 float 的时候，明 明加了 clear了还是显示不对……，现在都对定位迷糊了…… 

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ 浏览下面的跟帖，热心人还真不少，但真正能够点到要害的很少，甚至没有。网友们多从头疼 医头、脚痛治脚的方法给予答复，有些也能够止痛，但不能根治。在论坛中，我们会经常看到这样 的帖子。有些网友主观上是热情、乐于助人的，但客观上由于自己的认识偏颇，使很多以讹传讹的

CSS商业网站布局之道 

是内容区域的大小。

l 浏览器窗口是所有元素的根元素，也就是说 html 是最大的盒子，也有浏览器把 body看作最

大的盒子。 6.1.3 盒模型的类型 

CSS 把盒模型分为两种基本形态：Block（块状）和 Inline（内联，也有翻译为“行内”）。在 默认状态下，块状元素的宽度为 100％，而且后面隐藏附带有换行符，使块状元素始终占据一行。 符合标准的常用块状元素如下表：

内联元素没有高度和宽度，因此也就没有固定的形状，定义它的 width 和 height 属性无效。内 联元素可以在行内自由流动，但它会遵循盒模型基本规则，如可以定义边界、补白和边框，可以定 义背景。它的最小内容单元也会呈现矩形形状，但它显示的高度和宽度只能根据所包含内容的高度 和宽度来确定。有人把块状元素比作硬木盒子，而把内联元素比作随意变形的皮纸袋子，这还是挺 形象的。符合标准的常用内联元素如下：

第 6章 CSS布局模型 

盒模型的显示类型可以使用 display 属性来显式定义。任何元素都可以通过 display 属性改变默 认显示类型，因此也会改变该元素所对应的网页布局结构。 

display属性共有 18 个选项值，详细说明如下：

l block：块状显示，在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。 l none：隐藏显示，这与 visibility:hidden?声明不同，display:none?声明不会为被隐藏的元素保 l 

l 

l 

l 留位置。 inline：内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。 inline­block：内联显示，但是元素的内容以块状显示，行内其他内联元素还会显示在同一 行内。 compact：紧凑的块状显示，或基于内容之上的内联显示。 marker：在容器对象之前或之后显示，该属性值必须与:after 和:before伪元素一起使用。 l inline­table：具有内联特征的表格显示。

l list­item：具有块状特征的列表项目显示，并可以添加可选项目标志。

l run­in：块状显示或基于内容之上的内联显示。

CSS商业网站布局之道 

l table：具有块状特征的表格显示。

l table­caption：表格标题显示。

l table­cell：表格单元格显示

l table­column：表格列显示。

l table­column­group：表格列组显示。

l table­header­group：表格标题组显示。

l table­footer­group ：表格页脚组显示。

l table­row：表格行显示。

l table­row­group：表格行组显示。

更详细说明可以参考 CSS 参考手册。如果单从布局角度来分析，这些显示类型都可以划归为 block和 inline两种基本显示形态，其他类型都是这两种类型的特殊显示。其中真正能够应用并获得 所有浏览器支持的取值只有 4个：block、none、inline、list­item。 

none属性值表示隐藏并取消盒模型，这样元素所包含的内容就不会被浏览器解析和显示，同样 这个盒子所包含的任何元素都会被浏览器忽略，不管它们是否被声明为其他属性。 

list­item 属性值表示列表项目，其实质上也是块状显示，不过是一种特殊的块状类型，它增加 了缩进和项目符号。

另外，还有一些比较有用的显示类型，如 table、table­cell、inline­block、inline­table 等，它们 在特殊布局中具有重要的实用价值，但限于 IE 6 及更低版本浏览器对这些属性值的不支持，因此限 制了它们的优势被普及应用。 6.1.4 包含块 

CSS 包含块是标准布局中的一个重要概念， 它是绝对定位的基础。 请读者注意包含块与父元素、 包含框或包含元素等概念存在本质的区别。那么什么是包含块呢？

包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点和 百分比长度的参考。在默认状态下，body元素就是一个大的包含块，所有绝对定位的元素都是根据 窗口来确定自己所处的位置和百分比大小显示的。但是如果我们定义了包含元素为包含块以后，对 于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示 位置。

为了能够更直观地明白什么是包含块， 以及上述阐释的内涵， 下面我们来构建这样一个XHTML 代码模块： <div id="a"> 

<div id="c"></div> 

</div> 

<div id="b"> 

<div id="d"></div> 

</div>

在上面的代码中，构建了两个包含块，它们分别包含了一个元素。下面，我们用 CSS 定义这两