在前面几章中。我们针对CSS网页设计如何处理文档中的文本和字体介绍了很多实用知识。这一章中，我们将介绍视觉表现的一些理论方面，另外，前面为了强调CSS如何实现而跳过了一些问题，这些问题也将在这一章中回答。

为什么要用一整章来讨论CSS中关于视觉显示的这些理论基础呢？答案是，CSS包含如此开放、如此强大的一个模型，对于这样一个模型，可以有无数种方法结合应用各种属性，可以得到的效果也数不胜数，所以没有哪本书能全面涵盖每一种可能。你肯定还会发现新的方法来通过使用CSS得到你自己想要的文档效果。

在研究CSS的过程中，你可能会发现用户代理有一些看上去很奇怪的行为。如果全面地掌握了CSS网页设计中视觉表现模型是如何工作的，你就能确定一种行为到底是CSS所定义表现引擎的正确结果（尽管出乎意料），还是一个需要报告的bug。

基本框

CSS假定每个元素都会生成一个或多个矩形框，这称为元素框（规范的将来版本可能允许非矩形的框，不过对现在来说，框都是矩形的）。各元素框中心有一个内容区（content area）。这个内容区周围有可选的内边距、边框和外边距。这些项之所以被认为是可选的，原因是它们的宽度可以设置为0，实际上这就从元素框去除了这些项，图7-1 显示了一个示例内容区，这个内容区的周围还有内边距、边框和外边距。

图7-1：内容区及其外围项

可以用多种属性设置各外边距，边框和内边距，如margin-left或border-bottom。内容的背景（例如某种颜色或平铺图像）也会应用到内边距。外边距通常是透明的，从中可以看到父元素的背景。内边距不能是负值，但是外边距可以。本章后面将探讨外边距值为负时的效果。

边框使用已定义样式生成，如solid或inset，边框的颜色使用border-color属性设置。如果没有设置颜色，那么边框将取元素内容的前景色。例如，如果一个段落的文本是白色，那么该段落的所有边框都是白色，除非创作人员显式地声明了另外一种边框色。如果边框样式有某种缝隙，则可以通过这些缝隙看到元素的背景。换句话说，边框与内容和内边距有相同的背景。最后要说明的是，边框的宽度绝对不能为负。

注意：元素框的各个部分可能受很多属性的影响，如width或border-right。其中很多属性将在本章中用到，尽管目前我们还没有讨论过这些属性。具体的属性定义将在第8章给出，那时才会介绍有关的概念。

不过你会发现，对不同类型的元素格式化时存在着差别。块级元素的处理就不同于行内元素，而浮动元素和定位元素也分别有各自不同的表现。

包含块

每个元素都相对于其包含块摆放；可以这么说，包含块就是一个元素的“布局上下文”。 网页设计CSS2.1定义了一系列规则来确定元素的包含块。这里介绍的只是其中的部分规则，这些规则的概念都将在本章加以明确，而其他规则将在后面的章节中介绍。

对于正常的西方语言文本流中的一个元素，包含块由最近的块级祖先框、表单元格或行内块祖先框的内容边界（content edge）构成。

在这个非常简单的例子中，p元素的包含块是div元素，因为作为块级元素、表单元格或行内块元素，这是最近的祖先元素（本例中是一个块元素框）。类似地，div的包含块是body。因此。p的布局依赖于div的布局，而div的布局则依赖于body的布局。

不必担心行内元素，因为它们的摆放方式并不直接依赖于包含块。本章后面还会讨论有关内容。

快速复习

下面来快速地回顾一下我们讨论的网页设计中的各种元素，同时还将谈到一些重要的术语，这些术语对于理解本章的概念很重要。

正常流

这是指西方语言文本从左向右、从上向下显示，这也是我们熟悉的传统HTML文档的文本布局，注意，在非西方语言中，流方向可能不同。网页设计中大多数元素都在正常流中，要让一个元素不在正常流中，唯一的办法就是使之成为浮动或定位元素（将在第10章介绍）。要记住，本章只讨论正常流中的元素。

非替换元素

如果元素的内容包含在文档中，则称之为非替换元素。例如，如果一个段落的文本内容都放在该元素本身之内，这个段落就是一个非替换元素。

替换元素

这是指用作为其他内容占位符的一个元素。替换元素的一个经典例子就是img元素，它只是指向一个图像文件，这个文件将插入到文档流中该img元素本身所在位置。大多数表单元素也可以替换（例如，<input type="radio">)。

块级元素

这是指段落、标题或div之类的元素。这些元素在正常流中时，会在其框之前和之后生成“换行”，所以处干正常流中的块级元素会垂直摆放。通过声明display: block，可以让元素生成块级框。

行内元素

这是指strong或span之类的元素，这些元素不会在之前或之后生成“行分隔符”，它们是块级元素的后代。通过声明display: inline。可以让元素生成一个行内框。

根元素

位于文档树顶端的元素。在HTML文档中，这就是元素html在XML文档中。则可以是该语言允许的任何元素。