CSS2 规范阅读 : 视觉格式化模型 Visual formatting model
9.1 视觉格式化模型简介
视觉格式化模型(Visual formatting model)是做什么的 ? 定义User Agent如何在视觉介质上处理文档树。
how user agents process the document tree for visual media.
User Agent: 一般你都可以把它理解成电脑或者手机上的某个浏览器：IE,Chrome,Firefox,UC等等。- 视觉介质 : 你可以理解是显示器，打印机等视觉输出设备。
- 文档树 : 你就可以理解成一个HTML(或者XML)文档,是一组树形结构组织的元素。
视觉格式化模型中，文档树(document tree)中的每个元素根据盒子模型(box model)的定义会产生0个或者多个盒子。这些盒子的布局由以下几点决定：
- 盒子外形尺寸(dimension)和类型(type)。
- 定位方案(positioning scheme)(正常流? 浮动? 绝对定位?)
- 文档树(document tree)中的元素之间的关系
- 其他外部信息(比如视口viewport尺寸，图片自身大小等)
规范中本章定义的各种属性对连续介质(continuous media)和分页介质(paged media)都适用。但是其中,边缘属性(margin)应用到分页介质时会表现得不一样。
视觉格式化模型规范也并不是定义了格式化的所有方面，比如字符间距算法就没有在这里定义。对于这些规范没有明确定义的地方，不同的浏览器(
user agent)会有不一样的表现。
9.1.1 Viewport 视口
在连续介质上，User Agent通常提供给用户一个窗口，或者屏幕上的一块可见区域用来查看文档(一般理解成网页即可),这个窗口或者可见区域就是视口Viewport。视口尺寸发生变化时(比如用户通过拖拽窗口边缘变大或者缩小窗口),User Agent会重新布局文档。
9.1.2 Containing block 包含块
CSS2.1中，盒子的位置和属性是参照一个叫做Containing block包含块的矩形盒子计算出来的。一般来说，元素所产生的盒子充当了它的子孙元素盒子的Containing block包含块；我们可以这么说：一个盒子为它的子孙盒子构建了一个包含块。
术语
一个盒子的包含块意思是包含这个盒子的一个块，而不是这个盒子所生成的块。
The phrasea box's containing blockmeansthe containing block in which the box lives, not the one it generates.
每个盒子都会参照它的包含块被给定一个位置，但这并不是说这个盒子从显示上来讲一定会被它的包含块所包含在内，一个盒子有可能溢出(overflow)它的包含块。
逻辑结构组织上一个盒子总是被它的包含块所包含，显示上一个盒子有可能溢出它的包含块的显示区域。
一个盒子的包含块的尺寸计算详情可以参考这里。
9.2 控制盒子的生成 Controlling box generation
9.2章节描述了CSS2.1能够生成的盒子的类型(type of boxes)。盒子的类型会影响它在视觉格式化模型中的行为表现。下面提到的display属性，是用来指定盒子类型的。
9.2.1 块级别元素和块盒子 Block-level elements and block boxes
块级元素(block-level element)是源文档中被格式化显示为盒子的元素，比如段落。通过将一个元素的display属性设置为block, list-item, 或者 table，可以将这个元素变成一个块级盒子 (block-level box)。
块级盒子会参与到一个块级格式化上下文(block formatting context,简称BFC)中来。每个块级元素都产生一个基本的块级盒子用来包含其子孙盒子和所产生的内容，这个基本的块级盒子同时也是定位方案(positioning scheme)所要使用的盒子。
一些块级元素除了基本盒子之外，可能还会产生一些附加的盒子，比如list-item元素。这些附加的位置会参照基本盒子设置。
除了表格盒子(table box)和可替换元素(replaced element),一个块级盒子(block-level box)也是一个块容器盒子(block container box)。一个块容器盒子要么只包含块级盒子，要么建立一个仅仅包含行内盒子(inline-level box)的行内格式化上下文(inline formatting context)。并非所有的块容器盒子都是块级盒子:不可替换行内块(non-replaced inline block)和不可替换表单元格(non-replaced table cell)是块容器但并不是块级盒子。
块级盒子如果同时也是块容器，就叫做块盒子(block box)。
在不至于引起歧义的情况下，三个术语,
block-level box,block container box,和block box都可能会缩写成block,请留意。
9.2.1.1 Anonymous block box
//TODO
9.2.2 行内级别元素和行内盒子 Inline-level elements and inline boxes
一个行内盒子(inline box)是这样的：它既是行内级别的盒子(inline-level)，并且其内容加入到包含它的行内格式化上下文。
一个属性display:inline的不可替换元素产生一个行内盒子。不是行内盒子(inline box)的行内级别盒子(inline-level box)(比如可替换的inline-level元素, inline-block元素, 或者 inline-table元素)，被称作原子行内级别盒子(atomic inline-level box)，因为他们加入到他们的行内格式化上下文时，将他们的行内格式化上下文作为单一的一个不透明盒子。
9.2.3 Run-in 盒子
CSS3 中 的'Display: run-in'。这一部分存在的目的仅仅是让文档分区编码和之前的草稿一致。
9.2.4 display属性
display属性可以设置为如下值，他们的意思分别是:
block: 使一个元素生成一个块盒子。inline-block: 使一个元素生成一个行内级别盒子容器。
- 内部格式化为一个块盒子，元素自身格式化一个原子行内级别盒子。
inline: 使一个元素生成一个或者多个行内盒子。list-item: 使一个元素(比如)生成一个基本块盒子和一个标记盒子.none: 让一个元素从格式化结构中消失。
- 根本不产生盒子，对布局不产生任何影响，结构上不存在；
- 子孙元素也不产生任何盒子，对布局不产生任何影响，也从结构中消失；
- 即使在子孙节点上重新设置
display为其他值，也不会让这些节点回到结构中；
注意 :
display:none是真正意义上的消失：从视觉格式化结构中消失，当然视觉上也不可见。注意这一点和visibility:hidden是有区别的。
table,inline-table,table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row,table-cell,table-caption
- 这些值用来让元素表现为表格元素。
一个元素的display属性的指定值和计算值除了以下两种情况下以外，都是相同的：
positioned and floating element定位或者浮动元素root element根元素
至于以上两种情况,
display属性计算值如何变化，可以参考 Relationships between ‘display’, ‘position’, and ‘float’小节。
display属性的初始值总是inline,但是User Agent(也就是浏览器)的缺省样式表一般会重写这个值。可以参考一下HTML4的sample style sheet。
HTML4的
sample style sheet描述了HTML4元素的典型格式，这个表是基于对当前UA实践的广泛研究得出的。该表是信息性的而非规范性的。在自己的实现中开发人员可以用此表理解各个元素的缺省样式。
9.3 定位方案 Positioning scheme
CSS2.1中，一个盒子可以使用如下三种定位方案之一布局 :
1. 正常流
2. 浮动
3. 绝对定位
9.3.1 选择一个定位方案: position 属性
//TODO
9.3.2 Box offsets: 'top', 'right', 'bottom', 'left'
//TODO
9.4 正常流 Normal flow
//TODO
9.4.1 Block formatting contexts
//TODO
9.4.2 Inline formatting contexts
//TODO
9.4.3 Relative positioning
//TODO
9.5 浮动 Float
//TODO
9.6 绝对定位 Absolute positioning
//TODO
9.7 三者之间的关系 : display, position, float
//TODO
9.8 比较 正常流，浮动 和绝对定位
//TODO
9.9 分层展示 Layered presentation
//TODO
9.10 文字方向 : direction 和 unicode-bidi 属性
//TODO
规范原文地址