控制盒的生成

控制盒就是我们常说的盒。盒的类型对其在视觉格式化模型中的行为有一定影响。

display的取值

display属性指定了盒的类型：

• none：此元素不会被显示。
• block：此元素将显示为块级元素，此元素前后会带有换行符。
• inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
• inline-block：行内块元素。（CSS2.1 新增的值）
• list-item：此元素会作为列表显示。
• run-in：此元素会根据上下文作为块级元素或内联元素显示。
• compact：CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
• marker：CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
• table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
• inline-table：此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
• table-row-group：此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
• table-header-group：此元素会作为一个或多个行的分组来显示（类似 <thead>）。
• table-footer-group：此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
• table-row：此元素会作为一个表格行显示（类似 <tr>）。
• table-column-group：此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
• table-column：此元素会作为一个单元格列显示（类似 <col>）
• table-cell：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
• table-caption：此元素会作为一个表格标题显示（类似 <caption>）
• inherit：规定应该从父元素继承 display 属性的值。

块级元素和块盒

块级元素：当display值为block、list-item、table时，这些盒子会被标记为块级元素，在竖直方向一个接一个地排列，同时参与块级格式化上下文。

• 块级盒（block-level box）：是参与会计格式化上下文的盒。每个块级元素生成一个主块级盒，用来包含后代及生成的内容，并且任何定位方案都与该盒有关。这些块级元素可能会生成除主盒外额外的盒：list-item元素。这些额外的盒根据主盒来放置。
• 块容器盒（block container box）：一个块容器要么只包含块级盒，要么建立行内格式化上下文并因此只包含行内级盒。除了表格盒和替换元素外，一个块级盒也是块容器盒。不是所有块容器盒都是块级盒：非替换元素的行内块与非替换元素的表格单元都是块级容器，但不是块级盒。
• 块盒（block box）：作为块级容器的块级盒也叫块盒。

一个块级元素会生成一个块级盒，块级盒参与块格式化上下文，用于定位，并且包含后代生成的内容。块级盒不一定会生成块容器盒，块容器盒也并非必须由块级盒生成。块容器盒只是符合其直接子盒都是块级盒或行内级盒的条件，可以由部分块级盒和行内级盒生成。

匿名块盒

当块容器盒内部同时存在块级盒和行内盒的情况，CSS2.1会强制让它里面只包含有块级盒。例如下面的代码会在“Some text”四周加上你们块盒（注意是块盒，首先它被套上一个块级盒，然后由于内部只有行内盒，因此又是一个块容器盒，因此是一个块盒）。

当行内盒包含流内块级盒时，该行内盒（及与它处于同一行框里的行内祖先元素）将会被该块级盒（以及任何连续的或只被可合并的空白符和/或流外元素隔开的块级兄弟）打破。把行内盒分成两个盒（即使有一边是空的），分别位于块级盒的两边。拆分前的行框和拆分后的行框都被包进匿名块盒，并且该块级盒作为这些匿名盒的兄弟。当这样一个行内盒受到相对定位的影响时，任何由此产生的位移也会影响行内盒里面的块级盒。

行内元素与行内盒

行内级元素：当display为inline、inline-block、inline-table时，这些盒子将被标记为行内级元素，在水平方向上一个接一个排列，如果宽度不够将生成多行。

• 行内级盒：行内级元素将生成行内级盒，参与行内格式化上下文。
• 行内盒：特殊的行内级盒，它的内容参与了它的包含行内格式化上下文（containing inline formatting context）。display为inline的非替换元素会生成一个行内盒。
• 原子行内级盒：不属于行内盒的行内级盒，它们作为单一的不透明盒参与其行内格式化上下文。例如行内级替换元素、display为inline-block和inline-table的元素。

匿名行内盒

任何被直接包含在一个块容器元素（不在行内元素里面）的文本，必须视为一个匿名行内元素。

<p>Some <em>emphasized</em> text</p>

比如这里"emphasized"的盒是一个由行内元素<em>生成的行内盒，但其他盒（"Some"和"text"）都是由块级元素<p>生成的行内盒。后者叫做匿名行内盒，因为它们没有与之相关的行内元素。这种匿名行内盒从它们的父级块盒继承了可继承的属性，不可继承的属性取其初始值。示例中，匿名行内盒的颜色是从P继承的，但背景是透明的对于后续会根据'white-space'属性合并起来的空白字符内容，不会生成任何匿名行内盒。

如果知道上下文中匿名盒是哪种含义，本规范中的匿名行内盒和匿名块盒都可以简称为匿名盒在格式化表格时会出现更多的匿名盒类型。

小结

现对上面的内容进行一个总结：