作者：武利剑

三维的可视化格式模型

可视化格式模型是非常抽象的概念。它是 CSS 布局的核心，通过它，框( box )可以获得应有的尺寸，放到需要的位置。

我们通常所看到的页面都是平面 2D 的效果，但可视化模型却是 3D 的，除了 X 轴，Y 轴，还有决定元素显示顺序¹的 Z 轴。 Z 轴垂直穿过计算机屏幕，面向用户的一侧是正轴，框在 Z 轴方向上离用户越近，显示越是靠前。

类似 Photoshop² 中图层的概念，我们可以把可视化格式模型想像成是一张一张叠起来的透明胶片， 每个透明胶片上都有一个或多个由元素形成的框，框的内容区域有图片文字等内容， 改变图层的顺序和属性(透明度以及图层叠加方式)可以改变图像的最后效果。

可视化格式模型的官方说法是，它规定了用户端在媒介中如何处理文档树( document tree )。以下是对其中关键词的解释：

• 用户端：对我们来说一般指浏览器。
• 媒介：展现页面的介质。例如，纸媒介，听觉浏览器和显示器等³。
• 文档树( document tree )：源文档中元素树的编码。树中，每一个元素恰好由一个父元素。根元素是例外，它没有父元素。就是 document 和页面上的元素所构成的类似树形的结构。

可视化格式模型，不会规定所有格式的细节（比如，它并不是指字间距）。

本部分会涉及很多新概念，如包含块、元素的类型、定位体系、块级格式化上下文、行内格式化上下文、浮动、绝对定位和 z-index，以及可视化格式模型的细节部分，自动宽度高度的计算等。

注：

1. 框显示的前后顺序由 z-index 的值和元素的特性决定，详细的资料请参考：W3C CSS2.1 - Appendix E. Elaborate description of Stacking Contexts
2. Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一。
3. 关于媒介的详细介绍，请参照： W3C CSS2.1 - 7 Media types

框( box )布局影响因素

在可视化格式模型中，每一个元素都会根据框模型产生 0 个或多个框，而这些框的布局受某些因素的影响。下面一一介绍。

框的尺寸和类型

框的类型是指 display 特性所决定的元素类型，如：DIV 是块级元素，SPAN 是行内元素等。这个特性会使元素产生相应的控制框¹。

定位体系

框在布局时，根据三种定位体系定位。分别是，常规流、浮动和绝对定位²。

文档树中元素之间的关系

比如，一个块元素包含两个互为兄弟节点的浮动元素，后面那个浮动元素的布局，会受前面元素以及它包含块³的影响。

外部信息

比如，可视窗口的大小会对布局有影响。有的页面要求自适应窗口大小，就是因为窗口大小对布局有影响。再比如，图片的固有尺寸，会影响行内替换元素的尺寸，进而影响这个布局。

注：

1. 关于控制框，请参考：W3C CSS2.1 - 9.2 Controlling box generation
2. 这三种定位体系的详细内容会在后面讲到。请参考：W3C CSS2.1 - 9.3 Positioning schemes
3. 关于包含块的内容，请参见： W3C CSS2.1 - 10.1 Definition of "containing block"

视口（viewport）

视口，即可视窗口。当可视窗口的尺寸大小改变时，浏览器应该改变文档的布局。 比如，有些值依赖于可视窗口的大小，DIV 'width' 的 "auto" 值，等等。

当可视窗口的尺寸小于文档渲染的画布（也就是页面）的大小时，浏览器应该提供滚动机制。 每个画布最多有一个可视窗口。但是，浏览器可以同时渲染多个画布。