CSS代码编写中视觉格式化模型的学习教程

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个基础概念。 视觉格式化模型根据 CSS 盒模型为文档的每个元素生成 0，1 或多个盒。每个盒的布局由如下内容组成：

（1）盒尺寸：明确指定，受限或没有指定
（2）盒类型：行内(inline), 行内级别(inline-level), 原子行内级别(atomic inline-level), 块(block)盒；
（3）定位方案(positioning scheme): 常规流，浮动或绝对定位；
（4）树中的其它元素: 它的子代与同代；
（5）视口(viewport) 尺寸与位置；
（6）内含图片的固定尺寸；
（7）其它信息。
一个盒相对于它的包含块(containing block) 的边界来渲染。通常盒为它的后代元素建立包含块。注意盒并不受它的包含块的限制，当它的布局跑到包含块的外面时称为溢出(overflow)。

视口 Viewport
在连续媒介上工作的用户代理通常会向用户提供一个视口（屏幕上的一个窗口或其它可视区域），用户可以通过它来访问文档。用户代理可以在视口被调整大小时改变文档的布局（详见初始包含块）。

如果视口小于渲染文档的画布区域，用户代理应当提供一个滚动机制。每个画布最多可拥有一个视口，但用户代理可以把文档渲染至多个画布上（即为相同文档提供不同的视图）。

包含块 Containing blocks
在CSS 2.1中，许多框的位置和大小都根据一个名为包含块的矩形框边缘来相对计算得到。为元素生成的框通常会充当其后裔框的包含块；我们称框为其后裔“创建”（establishes）了包含块。“框的包含块”表示“框所处的包含块”，而不是其产生的包含块。

每个框会被给予一个相对于其包含块的位置，但它不会被局限在其包含块内；它有可能会溢出。

盒的生成(Box generation)
CSS 视觉格式化模型的一部分工作是从文档元素生成盒。生成的盒拥有不同类型，并对视觉格式化模型的处理产生影响。生成盒的类型取决于 CSS 属性 display

块级元素与块盒(Block-level elements and block boxes)

当元素的 CSS 属性  display 为 block, list-item 或 table 时，它是块级元素 block-level 。块级元素（比如<p>)视觉上呈现为块，竖直排列。

块级盒参与(块格式化上下文 block formatting context)。每个块级元素至少生成一个块级盒，称为主要块级盒(principal block-level box)。一些元素，比如<li>，生成额外的盒来放置项目符号，不过多数元素只生成一个主要块级盒。

主要块级盒将包含后代元素生成的盒以及生成的内容。它也是可以使用(定位方案 positioning scheme)的盒。

venn_blocks.png一个块级盒可能也是一个块容器盒。块容器盒(block container box) 只包含其它块级盒，或生成一个行内格式化上下文(inline formatting context)，由此只包含行内盒。注意块级盒与块容器盒概念不同。 前者描述元素跟它的父元素与兄弟元素之间的表现，后者描述元素跟它的后代之间的影响。有些块级盒，比如表格，不是块容器盒。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。

同时是块容器盒的块级盒称为块盒(block boxes)。

匿名块盒(Anonymous block boxes)

有时需要添加补充性盒，这些盒称为匿名盒(anonymous boxes),  它们没有名字，不能被 CSS 选择符选中。

不能被 CSS 选择符选中意味着不能用样式表添加样式。这意味着所有继承的 CSS 属性值为 inherit ，所有非继承的 CSS 属性值为 initial 。

块容器盒要么只包含行内级盒，要么只包含块级盒。但通常文档会同时包含两者。在这种情况下，将创建匿名块盒来包含毗邻的行内级盒。

拿下面的 HTML 代码来说 ( <div> 与 <p> 使用默认属性 display:block )

1. <div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>  

将创建两个匿名块盒，一个包含 <p> 前面的文本 (Some inline text)， 一个包含 <p> 后面的文本(followed by more inline text),  结构如下:

结果:

如果行内盒包含多个块盒，并且这些块盒之间没有夹杂内容，将在这些块盒前后创建匿名块盒。

行内级元素与行内盒(Inline-level elements and inline boxes)

当元素的 CSS 属性 display 的计算值为 inline, inline-block 或 inline-table 时，称它为行内级元素。视觉上它将内容与其它行内级元素排列为多行。典型的如段落内容，有文本(可以有多种格式譬如着重)，或图片，都是行内级元素。
行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文(inline formatting context)。同时参与生成行内格式化上下文的行内级盒称为行内盒(Inline boxes)。所有display:inline 的非替换元素生成的盒是行内盒。而不参与生成行内格式化上下文的行内级盒称为原子行内级盒(atomic inline-level boxes)。这些盒由可替换行内元素，或 display 值为 inline-block 或 inline-table 的元素生成，不能拆分成多个盒。

注意：起初原子行内级盒(atomic inline-level boxes)被称为原子行内盒(atomic inline boxes)。很不幸，它们并非行内盒。规范的勘误表修正了这个错误。 不管怎样，当再看到原子行内盒时可以放心的当成原子行内级盒，因为只是改了名字。
原子行内盒在行内格式化上下文里不能分成多行。

1. <style>   
2.   span {   
3.     display:inline; /* default value*/  
4.   }   
5. </style>   
6. <div style="width:20em;">   
7.    span 里的文本 <span>可以   
8.    分成多行因为</span>它是个行内盒。   
9. </div>  

结果: