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

Question

作为问题标题，css中的“生成框”是什么意思？文章链接：http : //www.sitepoint.com/web-foundations/css-box-model/

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会导致元素根本不生成框。元素保留在 DOM 树中，继承正常工作，但在视觉上它根本不存在。

Answer 2

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

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