CSS 框的生成：块级元素和块框

在盒模型中，一切皆为框，即页面上的每个元素会生成一个矩形框。默认情况下，一个元素的类型，决定了该元素生成框的类型。块级元素生成块级框，行内级元素生成行内级框，没有被任何元素所包含的文本生成匿名框。

也可以通过元素的 display 属性，来改变框的显示类型。可以把块级元素的 display 属性设置为 inline 或 inline-block，让它生成行内级框；也可以把行内块级元素的 display 属性设置为 block，让它生成块级框。

块级元素和块框

块级元素（block-level element），就是那些在源文档中被格式化成块的元素。大元素使框还会买吗。每个块级元素都会形成一个新的内容块，左右不能放置其他元素。典型的块级元素有div、p、h1~h6、ul、ol、table，等等。

如果一个元素的 display 属性值为 block、list-item、table、flex，它就会生成一个块级框，用来包含后代框和其他生成的内容。

每个块级框被渲染为完整的一行，即便一行的空间足以容纳多个块级框也是如此。假设在一个 div 容器中，包含三个块级子元素：

1. <div class = "wrapper">
2.     <div>div</div>
3.     <p style = "width: 100px;">p</p>
4.     <h1 style = "width: 100px;">h1</h1>
5. </div>

假设把 .wrapper 容器的宽度设置为 300px，把 p 元素和 h1 元素的宽度都设置为 100px。为了便于观察，并为div、p、h1都设置了 10px 的外边距和 1px 的虚线边框：

1. .wrapper {
2.    width: 300px;
3.    height: 120px;
4.    border: 1px solid #ccc;
5. }
6. div, p, h1 {
7.    margin: 10px;
8.    border: 1px dashed gray;
9. }

上述代码的运行结果如图 4‑59 所示：

从上图可以看出，.wrapper 容器和三个子元素都分别生成一个块级框，由于 div、p、h1 子元素都是块级元素，它们分别独占一行。弹框中的标签元素不能赋值吗，虽然一行的空间足以同时容纳 p 元素和 h1 元素， 但它们生成的块级框也是各自独占一行。

有些块级元素，除了生成块级框外，还会生成其他的框，如 display 属性值为 list-item 列表元素，会生成额外的框来放置列表的项目符号。假设有一个有序列表：

1. <ol>
2.    <li>列表项1</li>
3.    <li>列表项2</li>
4.    <li>列表项2</li>
5. </ol>

为了方便查看效果，为 ol 和 li 元素都设置 1px 的灰色边框：

1. ol {
2.    border: 1px solid #ccc;
3. }
4. li {
5.    border: 1px dashed gray;
6. }

有序列表 ol 元素本身是块级元素，其子元素 li 也是块级元素。因此，ol 元素会生成一个块级框，每个 li 子元素也会生成一个块级框。在为每个 li 子元素生成块级框时，还会生成额外的框，用来放置列表的项目符号。如图 4‑60 所示：

除了 table 框和替换元素的框，一个块级框同时也是一个块容器框。设计元素边框，一个块容器框要么只包含块级框，要么创建一个行格式化上下文，并只包含行内级框。

并不是所有的块容器框都是块级框，非替换的行内块（inline-block），以及非替换的表格单元格都是块容器框，但它们都不是块级框。如果一个框既是块级框，同时又是块容器框，则被称作块框。