diff --git a/files/zh-cn/web/css/containing_block/index.md b/files/zh-cn/web/css/containing_block/index.md index c13a783c6f7f26..3f372137c71638 100644 --- a/files/zh-cn/web/css/containing_block/index.md +++ b/files/zh-cn/web/css/containing_block/index.md @@ -16,7 +16,7 @@ slug: Web/CSS/Containing_block ![Diagram of the box model](box-model.png) -许多开发者认为一个元素的包含块就是他的父元素的内容区。但事实并非如此。接下来让我们来看看，确定元素包含块的因素都有哪些。 +许多开发者认为一个元素的包含块就是他的父元素的内容区，但这不一定正确。接下来让我们来看看，确定元素包含块的因素都有哪些。 ## 包含块的影响 @@ -36,17 +36,21 @@ slug: Web/CSS/Containing_block 1. {{cssxref("transform")}} 或 {{cssxref("perspective")}} 的值不是 `none` 2. {{cssxref("will-change")}} 的值是 `transform` 或 `perspective` 3. {{cssxref("filter")}} 的值不是 `none` 或 `will-change` 的值是 `filter`（只在 Firefox 下生效）。 - 4. {{cssxref("contain")}} 的值是 `paint`（例如：`contain: paint;`） + 4. {{cssxref("contain")}} 的值是 `layout`、`paint`、`strict` 或 `content`（例如：`contain: paint;`） 5. {{cssxref("backdrop-filter")}} 的值不是 `none`（例如：`backdrop-filter: blur(10px);`） -> **备注：** 根元素 (\) 所在的包含块是一个被称为**初始包含块**的矩形。他的尺寸是视口 viewport (for continuous media) 或分页媒体 page media (for paged media). +> **备注：** 根元素（{{HTMLElement("html")}}）所在的包含块是一个被称为**初始包含块**的矩形。它具有视口（对于连续媒体）或页面区域（对于分页媒体）的尺寸。 + +> **备注：** `perspective` 和 `filter` 属性对形成包含块的作用存在浏览器之间的不一致性。 ## 根据包含块计算百分值 -如上所述，如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性： +如上所述，当某些属性被赋予一个百分比值时，它的计算值取决于这个元素的包含块。以这种方式工作的属性包括**盒模型属性**和**偏移属性**： + +1. {{cssxref("height")}}、{{cssxref("top")}} 及 {{cssxref("bottom")}} 属性根据包含块的 `height` 计算百分比值。 +2. {{cssxref("width")}}、{{cssxref("left")}}、{{cssxref("right")}}、{{cssxref("padding")}} 和 {{cssxref("margin")}} 属性根据包含块的 `width` 计算百分比值。 -1. 要计算 {{cssxref("height")}} {{cssxref("top")}} 及 {{cssxref("bottom")}} 中的百分值，是通过包含块的 `height` 的值。如果包含块的 `height` 值会根据它的内容变化，而且包含块的 `position` 属性的值被赋予 `relative` 或 `static` ，那么，这些值的计算值为 auto。 -2. 要计算 {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 这些属性由包含块的 `width` 属性的值来计算它的百分值。 +> **备注：** 一个**块容器**（比如 inline-block、block 或 list-item 元素）要么只包含参与行级格式化上下文的行级盒子，要么只包含参与块级格式化上下文的块级盒子。只有包含块级或行级盒子的元素才是块容器。 ## 示例