css中的“生成框”是什么意思？

Question

如问题标题，css中的“生成框”是什么意思？

上下文：链接

包含块是参考矩形，其位置和尺寸用于后代元素位置和尺寸的相对计算。尽管元素是相对于其包含块定位的，但它们不受其限制，并且可能会溢出。在大多数情况下，生成的框充当后代框的包含块。

Answer 1

“生成的框”只是与视觉格式化结构中的元素关联的框。 “生成”一词特指创建一个框并根据元素的 CSS 属性将其绘制在屏幕上的行为。 CSS2.1 规范第 9 节的介绍很好地总结了它：

在可视化格式化模型中，文档树中的每个元素根据框模型生成零个或多个框。这些盒子的布局受以下因素控制：

• 盒子尺寸和类型。
• 定位方案（普通流、浮动、绝对定位）。
• 文档树中元素之间的关系。
• 外部信息（例如，视口大小、图像的内在尺寸等）。

大多数元素往往只生成一个框，但有些元素可以根据情况生成多个框或根本不生成框。例如，以下代码生成一个 100 x 100 像素的块框：

<div style="width: 100px; height: 100px; background-color: red"></div>

以下内联元素生成两个内联框，每一行一个：

<span style="line-height: 2; background-color: yellow">Text<br>Text</span>

下面的列表项生成两个框：一个包含项目符号的标记框，以及所谓的主框，即内容所在的框以及针对该列表项应用的样式（详细说明给出这里）：

<ul>
  <li style="list-style-position: outside; background-color: cyan"></li>
</ul>

您可以看到背景没有延伸到标记框，但这只是因为

list-style-position

是

outside

才会发生。将其设置为

inside

会使标记框与文本一起定位在主框内。然而，它仍然是一个独立的实体。

设置

display: none

会导致元素根本生成 no 框。该元素保留在 DOM 树中，继承正常工作，但视觉上它根本不存在。

Answer 2

这些框是围绕 HTML 元素的不同虚拟矩形。每个元素都有多个：直接围绕内容、边框的内部和外部边缘以及包括边距在内的所有内容。

文章作者将这个矩形称为“生成的框”。