From 28e6876dcf7b2684d4105c765df6c516542fd916 Mon Sep 17 00:00:00 2001 From: Allo Date: Mon, 16 Dec 2024 14:17:15 +0800 Subject: [PATCH 1/3] chore(css): Move CSS examples - Visual formatting model --- .../web/css/visual_formatting_model/index.md | 107 +++++++++++++----- 1 file changed, 77 insertions(+), 30 deletions(-) diff --git a/files/zh-cn/web/css/visual_formatting_model/index.md b/files/zh-cn/web/css/visual_formatting_model/index.md index 60b95341df09f0..ae34e45698f125 100644 --- a/files/zh-cn/web/css/visual_formatting_model/index.md +++ b/files/zh-cn/web/css/visual_formatting_model/index.md @@ -9,36 +9,13 @@ CSS **视觉格式化模型**（visual formatting model）是用来处理和在 视觉格式化模型会根据 [CSS 盒子模型](/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定： -- 盒子的尺寸：精确指定、由约束条件指定或没有指定 -- 盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block） -- [定位方案（positioning scheme）](/zh-CN/docs/CSS/Box_positioning_scheme)：普通流定位、浮动定位或绝对定位 -- 文档树中的其他元素：即当前盒子的子元素或兄弟元素 -- {{glossary("viewport", "视口")}}尺寸与位置 -- 所包含的图片的尺寸 -- 其他的某些外部因素 +- 盒子的尺寸和类型。 +- 定位方案（常规流定位、浮动定位和绝对定位）。 +- 文档树中元素之间的关系。 +- 外部因素（如，视口尺寸、图像的固有尺寸，等）。 该模型会根据盒子的包含块（*containing block）的*边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（_overflow）_。 -> [!NOTE] -> 译注：本文有很多相近的术语，阅读时需仔细，否则容易造成误解。为了方便读者，这里我将其整理一下。 -> -> - **块**：block，一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向上按照顺序依次堆叠。 -> - **包含块**：containing block，包含其他盒子的块称为包含块。 -> - **盒子**：box，一个抽象的概念，由 CSS 引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的，有时多个元素会合并生成一个盒子，有时一个元素会生成多个盒子（如匿名盒子）。 -> - **块级元素**：block-level element，元素的 `display` 为 `block`、`list-item`、`table` 时，该元素将成为块级元素。元素是否是块级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。 -> - **块级盒子**：block-level box，由块级元素生成。一个块级元素至少会生成一个块级盒子，但也有可能生成多个（例如列表项元素）。 -> - **块盒子**：block box，如果一个块级盒子同时也是一个块容器盒子（见下），则称其为块盒子。除具名块盒子之外，还有一类块盒子是匿名的，称为匿名块盒子（Anonymous block box），匿名盒子无法被 CSS 选择符选中。 -> - **块容器盒子**：block container box 或 block containing box，块容器盒子侧重于当前盒子作为“容器”的这一角色，它不参与当前块的布局和定位，它所描述的仅仅是当前盒子与其后代之间的关系。换句话说，块容器盒子主要用于确定其子元素的定位、布局等。 -> -> 注意：盒子分为“块盒子”和“块级盒子”两种，但元素只有“块级元素”，而没有“块元素”。下面的“行内级元素”也是一样。 -> -> - **行内级元素**：inline-level element，`display` 为 `inline`、`inline-block`、`inline-table` 的元素称为行内级元素。与块级元素一样，元素是否是行内级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。 -> - **行内级盒子**：inline-level box，由行内级元素生成。行内级盒子包括行内盒子和原子行内级盒子两种，区别在于该盒子是否参与行内格式化上下文的创建。 -> - **行内盒子**：inline box，参与行内格式化上下文创建的行内级盒子称为行内盒子。与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。 -> - **原子行内级盒子**：atomic inline-level box，不参与行内格式化上下文创建的行内级盒子。原子行内级盒子一开始叫做原子行内盒子（atomic inline box），后被修正。原子行内级盒子的内容不会拆分成多行显示。 -> -> 另外，本文的英文原文仍未最后定稿，因此部分内容并不完整。待英文原文更新后应及时更新译文。 - ## 盒子的生成 盒子的生成是 CSS 视觉格式化模型的一部分，用于从文档元素生成盒子。盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS {{ cssxref("display") }} 属性。 @@ -65,7 +42,31 @@ CSS 选择器不能作用于匿名盒子 (_anonymous boxes_)，所以它不能 块包含盒子可能只包含行内级盒子，也可能只包含块级盒子，但通常的文档都会同时包含两者，在这种情况下，就会在相邻的行内级盒子外创建匿名块盒子。 -{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-flex.html", '100%', 720)}} +```html live-sample___anonymous-flex +
+ 我被包装在一个匿名盒子中 +

我在段落中

+ 我被包装在一个匿名盒子中。 +
+``` + +```css live-sample___anonymous-flex +body { + font: 1.2em sans-serif; + margin: 20px; +} + +.flex { + display: flex; +} + +.flex > * { + background-color: rebeccapurple; + color: white; +} +``` + +{{EmbedLiveSample("anonymous-flex")}} 对这两个匿名盒子来说，程序员无法像 {{ HTMLElement("p") }} 元素那样控制它们的样式，因此它们会从 {{ HTMLElement("div") }} 那里继承那些可继承的属性，如 {{ cssxref("color") }}。其他不可继承的属性则会设置为 `initial`，比如，因为没有为它们指定 {{ cssxref("background-color") }}，因此其具有默认的透明背景，而 `

` 元素的盒子则能够用 CSS 指定背景颜色。类似地，两个匿名盒子的文本颜色总是一样的。 @@ -73,7 +74,27 @@ CSS 选择器不能作用于匿名盒子 (_anonymous boxes_)，所以它不能 如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。 -{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-block.html", '100%', 720)}} +```html live-sample___anonymous-block +

+ 我被包装在一个匿名盒子中 +

我在段落中

+ 我被包装在一个匿名盒子中。 +
+``` + +```css live-sample___anonymous-block +body { + font: 1.2em sans-serif; + margin: 20px; +} + +.example > * { + background-color: rebeccapurple; + color: white; +} +``` + +{{EmbedLiveSample("anonymous-block")}} ### 行内级元素和行内盒子 @@ -87,7 +108,33 @@ CSS 选择器不能作用于匿名盒子 (_anonymous boxes_)，所以它不能 > [!NOTE] > 开始的时候，原子行内级盒子叫做原子行内盒子，这并不准确，因为它们并不是行内盒子。后来在一次勘误时修正了这一问题。不过，当你见到某些文章中使用了“原子行内盒子”的时候，你尽可以将其理解为“原子行内级盒子”，因为这仅仅是一个名字的修改。 -{{EmbedGHLiveSample("css-examples/visual-formatting/line-boxes.html", '100%', 720)}} +```html live-sample___line-boxes +
+

+ 此文本跟随浮动，行级盒子被缩短以便为浮动腾出空间，但元素的盒子仍然在常规流中。 +

+``` + +```css live-sample___line-boxes +body { + font: 1.2em sans-serif; + margin: 20px; +} + +.float { + float: left; + width: 150px; + height: 150px; + background-color: rebeccapurple; + margin: 20px; +} + +.following { + background-color: #ccc; +} +``` + +{{EmbedLiveSample("line-boxes", "", "250px")}} #### 匿名行内盒子 From 0f9b85b1bfb983b0f3f49af90ccaed36bad88d0d Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 22 Jan 2025 19:00:46 +0800 Subject: [PATCH 2/3] tmp --- files/zh-cn/web/css/visual_formatting_model/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/web/css/visual_formatting_model/index.md b/files/zh-cn/web/css/visual_formatting_model/index.md index ae34e45698f125..2e543c69832d16 100644 --- a/files/zh-cn/web/css/visual_formatting_model/index.md +++ b/files/zh-cn/web/css/visual_formatting_model/index.md @@ -5,9 +5,9 @@ slug: Web/CSS/Visual_formatting_model {{CSSRef}} -CSS **视觉格式化模型**（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。 +在 CSS 中，**视觉格式化模型**（visual formatting model）描述了用户代理如何获取文档树，并将其处理后显示在视觉媒体上。这包括{{glossary("continuous media", "连续媒体")}}（例如电脑屏幕，以及书籍或浏览器打印功能打印的文档等[分页媒体](/zh-CN/docs/Web/CSS/CSS_paged_media)）。大部分信息同样适用于连续媒体和分页媒体。 -视觉格式化模型会根据 [CSS 盒子模型](/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定： +在视觉格式化模型中，文档树中的每个元素都会根据盒子模型生成一个个的盒子。这些盒子的布局由以下因素决定： - 盒子的尺寸和类型。 - 定位方案（常规流定位、浮动定位和绝对定位）。 @@ -24,7 +24,7 @@ CSS **视觉格式化模型**（visual formatting model）是用来处理和在 当元素的 {{ cssxref("display") }} 为 `block`、`list-item` 或 `table` 时，该元素将成为块级元素。一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列。 -每个块级盒子都会参与[块格式化上下文（block formatting context）](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（_principal block-level_ *box）。有*一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。 +每个块级盒子都会参与[块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（_principal block-level_ *box）。有*一些元素，比如列表项会生成额外的盒子来放置项目符号，而那些会生成列表项的元素可能会生成更多的盒子。不过，多数元素只生成一个主块级盒子。 主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与[定位方案](/zh-CN/docs/CSS/Positioning_scheme)。 From 66dc0748008f05da13f58e744edff50e55d13b3e Mon Sep 17 00:00:00 2001 From: Allo Date: Wed, 22 Jan 2025 22:46:56 +0800 Subject: [PATCH 3/3] part 1 --- .../web/css/visual_formatting_model/index.md | 47 ++++++++++++++----- 1 file changed, 35 insertions(+), 12 deletions(-) diff --git a/files/zh-cn/web/css/visual_formatting_model/index.md b/files/zh-cn/web/css/visual_formatting_model/index.md index 2e543c69832d16..3b1c7ecb316bb3 100644 --- a/files/zh-cn/web/css/visual_formatting_model/index.md +++ b/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 重要概念：