Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[zh-cn]: fix some translation miss for Containing_block #16831

Merged
merged 7 commits into from
Nov 5, 2023
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions files/zh-cn/web/css/containing_block/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ slug: Web/CSS/Containing_block

![Diagram of the box model](box-model.png)

许多开发者认为一个元素的包含块就是他的父元素的内容区。但事实并非如此。接下来让我们来看看,确定元素包含块的因素都有哪些。
许多开发者认为一个元素的包含块就是他的父元素的内容区,但这不一定正确。接下来让我们来看看,确定元素包含块的因素都有哪些。

## 包含块的影响

Expand All @@ -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;`)
YieldRay marked this conversation as resolved.
Show resolved Hide resolved
5. {{cssxref("backdrop-filter")}} 的值不是 `none`(例如:`backdrop-filter: blur(10px);`)

> **备注:** 根元素 (\<html>) 所在的包含块是一个被称为**初始包含块**的矩形。他的尺寸是视口 viewport (for continuous media) 或分页媒体 page media (for paged media).
> **备注:** 根元素 (\<html>) 所在的包含块是一个被称为**初始包含块**的矩形。它的尺寸是视口 viewport (对于 continuous media) 或分页媒体 page area (对于 paged media).

> **备注:** 在形成包含块时,`perspective` 和 `filter` 属性存在浏览器之间的不一致性。
YieldRay marked this conversation as resolved.
Show resolved Hide resolved

## 根据包含块计算百分值

如上所述,如果某些属性被赋予一个百分值的话,它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性:
如上所述,当某些属性被赋予一个百分比值时,它的计算值取决于这个元素的包含块。以这种方式工作的属性包括盒模型属性和偏移属性:
YieldRay marked this conversation as resolved.
Show resolved Hide resolved

1. {{cssxref("height")}} {{cssxref("top")}} 及 {{cssxref("bottom")}} 属性根据包含块的 `height` 计算百分比值。
2. {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 属性根据包含块的 `width` 计算百分比值。
YieldRay marked this conversation as resolved.
Show resolved Hide resolved

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 元素)要么只包含参与内联格式化上下文的内联级别盒子,要么只包含参与块格式化上下文的块级别盒子。只有包含块级或内联级别盒子的元素才是块容器。
yin1999 marked this conversation as resolved.
Show resolved Hide resolved

## 示例

Expand Down