Skip to content

Commit

Permalink
Update index.md
Browse files Browse the repository at this point in the history
  • Loading branch information
YieldRay authored Nov 5, 2023
1 parent 17dab6f commit 9521552
Showing 1 changed file with 8 additions and 4 deletions.
12 changes: 8 additions & 4 deletions files/zh-cn/web/css/containing_block/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,18 @@ slug: Web/CSS/Containing_block
4. {{cssxref("contain")}} 的值是 `layout`, `paint`, `strict``content`(例如:`contain: paint;`
5. {{cssxref("backdrop-filter")}} 的值不是 `none`(例如:`backdrop-filter: blur(10px);`

> **备注:** 根元素 (\<html>) 所在的包含块是一个被称为**初始包含块**的矩形。他的尺寸是视口 viewport (对于 continuous media) 或分页媒体 page area (对于 paged media).
> **备注:** 根元素 (\<html>) 所在的包含块是一个被称为**初始包含块**的矩形。它的尺寸是视口 viewport (对于 continuous media) 或分页媒体 page area (对于 paged media).
> **备注:** 在形成包含块时,`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 元素)要么只包含参与内联格式化上下文的内联级别盒子,要么只包含参与块格式化上下文的块级别盒子。只有包含块级或内联级别盒子的元素才是块容器。
## 示例

Expand Down

0 comments on commit 9521552

Please sign in to comment.