豆豆猫的窝

CSS核心：框模型与视觉格式化模型[2010年7月16日更新：包含块]

2010年7月13日

视觉类型的媒体根据CSS的视觉格式化模型（Visual formatting model）的规则来处理文档树中的元素，从而将(X)HTML转化成制作者设计的样子。

例如：

• 如何生成元素框；
• 处理各元素之间的关系；
• 根据框的尺寸、定位等CSS属性来确定元素的位置等；

因此，要掌握使用CSS控制页面内元素的技巧，就需要深入了解框模型（Box Model）及视觉格式化模型的原理。

文档树中的元素都产生矩形的框（Box），这些框影响了元素内容之间的距离、元素内容的位置、背景图片的位置等等。而浏览器根据视觉格式化模型（Visual formatting model）来将这些框布局成访问者看到的样子。

我曾在《别具光芒：CSS属性、浏览器兼容与网页布局》一书中，讲解过这些概念，但是很多读者反映内容比较晦涩难懂，这也是让我很困扰的一件事情。因为这些是CSS手册中最抽象的概念，有时候为了准确翻译手册的定义，可能会使得语句很拗口。

同时，由于出版社对于措辞的要求，让一些句子也变得不那么“平易近人”。

所以，我再次重新尝试，把这部分内容重新来编排一下，看看是否能把这些重要的内容讲得更易懂一些。

本文会随着内容的增加而不断更新，希望大家仔细阅读，并提出意见和建议。

视觉格式化模型中也有“布局（layout）”的概念，但是这个与页面设计经常用到的类似“3行2列”或者“3行3列”中的“排版布局”的概念不同，视觉格式化模型中的“布局”是指每个元素该如何来显示。

CSS 2.1中，一个控制框的布局可以根据三种定位方案：

1. 常规流向。CSS 2.1中，常规流向包含块框的块格式化，行内框的行内格式化，块框或行内框的相对定位，以及插入框的定位。
2. 浮动。在浮动模型中，一个框首先根据常规流向布局，再将它从流中取出并尽可能地向左或向右偏移。内容可以排列在一个浮动的边上。
3. 绝对定位。在绝对定位模型中，一个框整个地从常规流向中脱离（它对后续的兄弟元素没有影响），并根据包含块来分配其定位。

在理解视觉格式化的概念之前，要明确一点：包含块（Containing Block）是视觉格式化模型的一个重要概念，它也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

【未完待续……】