【分享】说说标准——CSS中非常重要的可视化格式模型(visual formatting model)简介

WebAdvocate 2010-07-19 05:10:21

加精

从今天开始，我会跟大家分享CSS非常重要的可视化格式模型，那这个概念到底有多重要呢？盒子模型是CSS中所有元素产生的box的自身构成，而可视化格式模型则是把这些box，按照规则摆放到页面上，也就是通常所说的布局。换句话说，可视化格式模型是整个页面的模型，这个模型规定了怎么在页面里摆放box，box相互作用等等。属于CSS的最为核心的概念之一。
可视化格式模型的概念非常多，我会分多次说明，我也会在我的能力范围内，尽量说的很细，力求通俗易懂。如果大家有哪里不懂的，请说明，大家一起讨论。thx！
这部分章节都是很理论性的东西，我尽量会多举例子，以达到直观的效果。

今天，只简单介绍一下其概念和涉及到的内容。目的是起一个提纲挈领的作用。
可视化格式模型，官方的说法是，它规定了用户端在媒介中如何处理文档树(document tree)。
● 用户端，对我们来说一般指浏览器。
● 媒介，相当于我们展现页面的介质。如，纸媒介，听觉浏览器和显示器等。感兴趣的可以看一下CSS2.1 的第7章：http://www.w3.org/TR/CSS2/media.html
● 文档树(document tree)是指源文档中元素树的编码。树中，每一个元素恰好由一个父元素。根元素是例外，它没有父元素。就是document和页面上的元素所构成的类似树形的结构。

在可视化格式模型中，每一个元素都会根据盒子模型产生0个或多个box，而这些box的布局受一下因素的影响：
● 1. box尺寸和类型
░░♦ 类型是指 display 特性所决定的元素类型，如：DIV 是块级元素，SPAN 是行内元素等
● 2. 定位体系
░░♦ 元素在布局时，根据3种定位体系定位。分别是，常规流、浮动和绝对定位。这3种定位体系的详细内容会在后面讲到。
● 3. 在文档树中，元素之间的关系。
░░♦ 比如，一个块元素包含两个互为兄弟节点的浮动元素，后面那个浮动元素的布局，会受前面元素以及它包含块的影响。
● 4. 外部信息。
░░♦ 比如，可视窗口的大小，我们有时候会做页面自适应窗口大小的功能，就是因为，窗口大小对布局有影响。再如，图片的固有尺寸，会影响行内替换元素的尺寸，进而影响这个布局。

这部分定义的特性，适用于 continuous media 和 paged media。当作用于 paged media时，margin的意义有所改变。

可视化格式模型，不会规定所有格式的细节（比如，它并不是指字间距）。用户端的一致性（ Conforming user agents ）在处理本规范未包含的格式化情形时，表现可能有所不同。

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

还有两个概念需要说明。

视口（viewport）

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

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

包含块(containing block)简介

在CSS2.1中，很多box的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，就被称作是包含块(containing block)。一般来说，(元素)生成的box会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)box为它的子孙节点建造了包含块。包含块是一个相对的概念。
比如：

<div>

<table>

<tr><td>hi</td></tr>

</table>

</div>

以上面的代码做例子，DIV 和 TABLE 都是包含块。DIV 是 TABLE 的包含块，同时TABLE又是 TD 的包含块，不是绝对的。
“一个box的包含块”，指的是“该box所存在的那个包含块”，并不是它建造的包含块。比如，上述代码中，TABLE 的包含块，说的是 DIV 建造的包含块，而不是TABLE自身建造的包含块。TABLE 建造的包含块，可以称作 TD 的包含块。

每个box关于它的包含块都有一个位置，但是它不会被包含块限制；它可以溢出(包含块)。包含块上可以通过设置 overflow 特性达到处理溢出的子孙元素的目的。

<div id=”A” style="width:100px; heigh:100px; border:1px solid red;">

    <div id=“B” style="width:200px; heigh:200px; background-color:gold;">hello</div>

</div>