part 1

files/zh-cn/web/css/visual_formatting_model/index.md

@@ -7,34 +7,43 @@ slug: Web/CSS/Visual_formatting_model
 
 在 CSS 中，**视觉格式化模型**（visual formatting model）描述了用户代理如何获取文档树，并将其处理后显示在视觉媒体上。这包括{{glossary("continuous media", "连续媒体")}}（例如电脑屏幕，以及书籍或浏览器打印功能打印的文档等[分页媒体](/zh-CN/docs/Web/CSS/CSS_paged_media)）。大部分信息同样适用于连续媒体和分页媒体。
 
-在视觉格式化模型中，文档树中的每个元素都会根据盒子模型生成一个个的盒子。这些盒子的布局由以下因素决定：
+在视觉格式化模型中，文档树中的每个元素都会根据盒子模型生成一个个盒子。这些盒子的布局由以下因素决定：
 
 - 盒子的尺寸和类型。
 - 定位方案（常规流定位、浮动定位和绝对定位）。
 - 文档树中元素之间的关系。
 - 外部因素（如，视口尺寸、图像的固有尺寸，等）。
 
-该模型会根据盒子的包含块（*containing block）的*边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（_overflow）_。
+CSS2 中定义了许多有关视觉格式化模型的信息，但是不同的 CSS 布局模块已经扩展了这些信息。阅读规范时，你经常会发现对 CSS2 中定义的模型的引用。因此，在阅读其他布局规范时，了解该模型以及 CSS2 中用于描述该模型的术语很有价值。
 
-## 盒子的生成
+在本文档中，我们定义了模型并介绍了一些相关的术语和概念，同时链接到更具体的页面以获取更多详细信息。
 
-盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS {{ cssxref("display") }} 属性。
+## 视口的作用
 
-### 块级元素与块盒子
+在连续媒体中，{{glossary("viewport", "视口")}}是浏览器窗口的显示区域。当视口的尺寸发生改变时（例如，如果你改变窗口大小，或改变移动设备的屏幕方向），用户代理会改变页面的布局。
 
-当元素的 {{ cssxref("display") }} 为 `block`、`list-item` 或 `table` 时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。
+如果视口小于文档的大小，那么用户代理需要提供一种方法来滚动到文档中不显示的部分。我们最常看到这种滚动是在**块向维度**上的滚动——在水平、从上到下的语言中的垂直滚动。但是，你可能设计了一些也需要在**行向维度**上滚动的内容。
 
-每个块级盒子都会参与[块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（_principal block-level_ *box）。有*一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。
+## 盒子生成
 
-主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与[定位方案](/zh-CN/docs/CSS/Positioning_scheme)。
+**盒子生成**是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。生成的盒子有不同的类型，影响它们视觉格式化的东西也不同。生成的盒子的类型取决于 CSS {{cssxref("display")}} 属性的值。
 
-一个块级盒子可能也是一个块容器盒子。块容器盒子（*block container box）要么*只包含其他块级盒子，要么只包含行内盒子并同时创建一个行内[格式化上下文（inline formatting context）](/zh-CN/docs/CSS/Inline_formatting_context)。
+最初定义于 CSS2 中的 `display` 属性在 [CSS 显示模块第 3 版](https://www.w3.org/TR/css-display-3/)中得到了扩展。此外，自 CSS2 以来，一些与显示有关的术语已经得到更新和澄清。
 
-能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为，而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。
+CSS 获取源文档并将其渲染到画布上。为此，它会生成一个中间结构，即**盒子树**，它表示被渲染文档的格式化结构。盒子树中的每一个盒子都表示画布上特定空间和/或时间点所对应的元素（或伪元素），而盒子树中的每个文本流同样表示其对应文本节点的内容。
 
-一个同时是块容器盒子的块级盒子称为块盒子（_block box）。_
+然后，对于每个元素，CSS 会根据元素 `display` 属性指定的值生成一个个盒子。
 
-#### 匿名块盒子
+> [!NOTE]
+> 盒子通常按其显示类型来指代——例如，由带有 `display: block` 的元素生成的盒子称为“块盒子”或简称为“块”。但请注意，块盒子、块级盒子和盒子容器之间具有细微的差异；有关更多星系信息，请参阅下面的[块盒子](#块盒子)部分。
+
+### 主盒子
+
+当一个元素生成了一个或多个盒子时，其中的一个盒子是**主盒子**（在盒子树中包含它的后代盒子和生成的内容，它同时也是任何定位方案中涉及的盒子）。
+
+一些元素可能会生成除主盒子以外的其他盒子，例如 `display: list-item` 会生成多个盒子（例如，一个**主块盒子**和一个**子标记盒子**）。而一些值（例如 `none` 或 `contents`）会导致元素及其后代不生成任何盒子。
+
+### 匿名块盒子
 
 在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用 CSS 选择符选中，因此称为匿名盒子（_anonymous boxes）_。
 
@@ -214,6 +223,20 @@ Run-in 盒子通过 `display:run-in` 来定义，它可以是块盒子，也可
 
 对固定位置的元素来说，其包含块为整个视口，该元素相对视口进行绝对定位，因此滚动时元素的位置并不会改变。
 
+### 块级元素与块盒子
+
+当元素的 {{ cssxref("display") }} 为 `block`、`list-item` 或 `table` 时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。
+
+每个块级盒子都会参与[块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（_principal block-level_ *box）。有*一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。
+
+主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与[定位方案](/zh-CN/docs/CSS/Positioning_scheme)。
+
+一个块级盒子可能也是一个块容器盒子。块容器盒子（*block container box）要么*只包含其他块级盒子，要么只包含行内盒子并同时创建一个行内[格式化上下文（inline formatting context）](/zh-CN/docs/CSS/Inline_formatting_context)。
+
+能够注意到块级盒子与块容器盒子是不同的这一点很重要。前者描述了元素与其父元素和兄弟元素之间的行为，而后者描述了元素跟其后代之间的行为。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。
+
+一个同时是块容器盒子的块级盒子称为块盒子（_block box）。_
+
 ## 参见
 
 - CSS 重要概念：