【分享】说说标准——CSS中非常重要的可视化格式模型(visual formatting model)简介
从今天开始，我会跟大家分享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为它的子孙节点建造了包含块。包含块是一个相对的概念。
比如：

HTML code

<div>
<table>
<tr><td>hi</td></tr>
</table>
</div>

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

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

HTML code

<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>

如上代码中，A 是 B的包含块，B 的定位跟 A 有关，B的大小大于A的大小，这时候，B 会溢出，而 A 不能限制 B 的大小。
注意，这段代码是有兼容性问题的，见：【分享】小心，IE中 width/height的设定值可能被其内容撑大

包含块的概念很重要，因为可视化格式模型中很多的理论性知识都跟这个概念有关系，比如，宽度高度自动值的计算，浮动元素的定位，绝对定位元素的定位等等。不了解包含块，就掌握不好以它为基础的后续理论。

关于更加细节的东西，会在以后的帖子中详细介绍，敬请期待……

详细资料见 W3C CSS2.1标准：
http://www.w3.org/TR/CSS2/visuren.html#visual-model-intro

可视化格式模型小节题目：
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一：包含块(containing block)
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之二：控制框(Controlling Box)的形成
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之三：定位体系概述
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之四：常规流中的Block formatting context
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之五：常规流中的inline formatting context
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之六：常规流中的相对定位
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之七：浮动(Float)概述
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)