diff options
Diffstat (limited to 'files/zh-cn/web/css')
7 files changed, 59 insertions, 92 deletions
diff --git a/files/zh-cn/web/css/@layer/index.md b/files/zh-cn/web/css/@layer/index.md index 8476f45e5d..86e7a3740d 100644 --- a/files/zh-cn/web/css/@layer/index.md +++ b/files/zh-cn/web/css/@layer/index.md @@ -12,17 +12,17 @@ browser-compat: css.at-rules.layer --- {{CSSRef}}{{SeeCompatTable}} -[CSS](/en-US/docs/Web/CSS) [@规则](/en-US/docs/Web/CSS/At-rule) 中的`@layer`声明了一个 _堆叠层_， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。 +[CSS](/en-US/docs/Web/CSS) [@规则](/en-US/docs/Web/CSS/At-rule) 中的`@layer`声明了一个 _级联层_， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。 ```css @layer utilities { - /* 创建一个名为 utilities 的堆叠层 */ + /* 创建一个名为 utilities 的级联层 */ } ``` ## 语法 -`@layer` @规则可以通过三种方式其一来创建堆叠层。第一种方法如上方代码所示，它创建了一个块级的@规则，其中包含作用于该层内部的CSS规则。 +`@layer` @规则可以通过三种方式其一来创建级联层。第一种方法如上方代码所示，它创建了一个块级的@规则，其中包含作用于该层内部的CSS规则。 ```css @layer utilities { @@ -35,14 +35,14 @@ browser-compat: css.at-rules.layer } } ``` -一个堆叠层同样可以通过 {{cssxref("@import")}} 来创建，规则存在于被引入的样式表内： +一个级联层同样可以通过 {{cssxref("@import")}} 来创建，规则存在于被引入的样式表内： ```css @import(utilities.css) layer(utilities); ``` -你也可以创建带命名的堆叠层，但不指定任何样式。例如，单一的命名层： +你也可以创建带命名的级联层，但不指定任何样式。例如，单一的命名层： ```css @layer utilities @@ -55,17 +55,17 @@ browser-compat: css.at-rules.layer @layer theme, layout, utilities ``` -这一做法很有用，因为层最初被指定的顺序决定了它是否有父级层。对于声明而言，如果同一声明在多个堆叠层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 `theme` 层和 `utilities` 层中存在冲突的规则，那么 `utilities` 层中的将优先被应用。 +这一做法很有用，因为层最初被指定的顺序决定了它是否有父级层。对于声明而言，如果同一声明在多个级联层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 `theme` 层和 `utilities` 层中存在冲突的规则，那么 `utilities` 层中的将优先被应用。 -即使 `utilities` 层中规则的 _优先级低于_ `theme` 层中的，该规则仍会被应用。一旦堆叠层顺序建立之后，优先级和出现顺序都会被忽略。这将使创建CSS选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的堆叠层中。 +即使 `utilities` 层中规则的 _优先级低于_ `theme` 层中的，该规则仍会被应用。一旦级联层顺序建立之后，优先级和出现顺序都会被忽略。这将使创建CSS选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的级联层中。 -> **注**：在已经声明堆叠层的名字后，它们的顺序随即被确立，你可以重复声明某堆叠层的名字来向其添加CSS规则。这些样式将被附加到该层的末尾，且堆叠层之间的顺序不会改变。 +> **注**：在已经声明级联层的名字后，它们的顺序随即被确立，你可以重复声明某级联层的名字来向其添加CSS规则。这些样式将被附加到该层的末尾，且级联层之间的顺序不会改变。 -其他不属于任何一堆叠层的样式将被集中到同一匿名层，并置于所有层的前部，这意味着任何堆叠层内定义的规则都将覆盖外部声明的规则。 +其他不属于任何一级联层的样式将被集中到同一匿名层，并置于所有层的前部，这意味着任何级联层内定义的规则都将覆盖外部声明的规则。 ### 嵌套层 -堆叠层允许嵌套，例如： +级联层允许嵌套，例如： ```css @layer framework { @@ -87,7 +87,7 @@ browser-compat: css.at-rules.layer ### 匿名层 -如果创建了一个堆叠层但并未指定名字，例如： +如果创建了一个级联层但并未指定名字，例如： ```css @layer { @@ -107,9 +107,9 @@ browser-compat: css.at-rules.layer ### 基本例子 -下方的例子创建了两条CSS规则。其中一条为 `type` 层内部的 {{htmlelement("p")}} 元素创建。另一条规则创建于堆叠层外部，作用于 `.box p`。 +下方的例子创建了两条CSS规则。其中一条为 `type` 层内部的 {{htmlelement("p")}} 元素创建。另一条规则创建于级联层外部，作用于 `.box p`。 -没有堆叠层时，选择器 `.box p` 将会有最高的优先级，因此文字 `Hello, world!` 将被显示为绿色。有堆叠层时，其外部的顺序和优先级将被忽略。因为 `type` 层的次序排在存储非层级信息的匿名层之后，文字的颜色将显示为紫色。 +没有级联层时，选择器 `.box p` 将会有最高的优先级，因此文字 `Hello, world!` 将被显示为绿色。有级联层时，其外部的顺序和优先级将被忽略。因为 `type` 层的次序排在存储非层级信息的匿名层之后，文字的颜色将显示为紫色。 #### HTML @@ -140,7 +140,7 @@ browser-compat: css.at-rules.layer ### 向已存在的层中添加规则 -下方的例子创建了两个没有规则的堆叠层，随后，CSS规则被添加到这两层中。`base` 层定义了color、border、font-size和padding。`special` 层定义了不同的color属性。因为 `special` 层在定义时排在最后，其中的color属性将被应用，文字的颜色将显示为`rebeccapurple`。`base` 层中的其他规则仍然有效。 +下方的例子创建了两个没有规则的级联层，随后，CSS规则被添加到这两层中。`base` 层定义了color、border、font-size和padding。`special` 层定义了不同的color属性。因为 `special` 层在定义时排在最后，其中的color属性将被应用，文字的颜色将显示为`rebeccapurple`。`base` 层中的其他规则仍然有效。 #### HTML diff --git a/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html index 82370bee3e..641efc718f 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html +++ b/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html @@ -172,9 +172,9 @@ translation_of: >- <h3 id="Giving_items_different_flex-shrink_factors">Giving items different <code>flex-shrink</code> factors</h3> -<p>在 <code>flex-grow</code>值相同的情形下, 你可以给flex子元素 设置不同的 <code>flex-shrink</code> 值. 假如你想让一个flex子元素 比它的兄弟元素收缩的更快或更慢， 或者不在收缩， 这回改变它的默认行为.</p> +<p>在 <code>flex-grow</code>值相同的情形下, 你可以给flex子元素 设置不同的 <code>flex-shrink</code> 值. 假如你想让一个flex子元素 比它的兄弟元素收缩的更快或更慢， 或者不再收缩， 这会改变它的默认行为.</p> -<p>在下面的示例中第一个flex子元素设置 <code>flex-shrink</code> 的值为1, 第二个为 <code>0</code> (因此它将不会收缩), 第三个为 <code>4</code>. 第三个flex子元素比第一个收缩的更快. 任意设置不懂的值 — 你可以给 <code>flex-grow</code> 使用小数或者大一点的数. 选择对于你来说任意合理的数.</p> +<p>在下面的示例中第一个flex子元素设置 <code>flex-shrink</code> 的值为1, 第二个为 <code>0</code> (因此它将不会收缩), 第三个为 <code>4</code>. 第三个flex子元素比第一个收缩的更快. 任意设置不同的值 — 你可以给 <code>flex-grow</code> 使用小数或者大一点的数. 选择对于你来说任意合理的数.</p> <p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p> diff --git a/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index cf499c2bd8..4909a95b04 100644 --- a/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html +++ b/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts <h3 id="创建新的块格式上下文">创建新的块格式上下文</h3> -<p>{{HTMLElement("html")}} 元素不是唯一能够创建块格式上下文的元素。默认为块布局的任何元素也会为其后代元素创建块格式上下文。此外，还有一些CSS属性可以使元素创建一个BFC，即使默认情况下它不这样做。</p> +<p>{{HTMLElement("html")}} 元素不是唯一能够创建块格式上下文的元素。任何块级元素都可以通过应用某些CSS属性来创建一个BFC</p> <p>除了文档的根元素({{HTMLElement("html")}}) 之外，还将在以下情况下创建一个新的BFC：</p> diff --git a/files/zh-cn/web/css/cursor/index.html b/files/zh-cn/web/css/cursor/index.html index 7d9e5fa50f..413624e5f5 100644 --- a/files/zh-cn/web/css/cursor/index.html +++ b/files/zh-cn/web/css/cursor/index.html @@ -9,6 +9,7 @@ tags: - NeedsTranslation - TopicStub translation_of: Web/CSS/cursor +browser-compat: css.properties.cursor --- <div>{{CSSRef}}</div> @@ -16,8 +17,6 @@ translation_of: Web/CSS/cursor <div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div> - - <h2 id="Syntax" name="Syntax">语法</h2> <pre class="brush: css no-line-numbers notranslate">/* 关键字值 */ @@ -63,7 +62,7 @@ cursor: unset; <tr> <th>类型</th> <th>CSS值</th> - <th></th> + <th style="width: 7.5em;">例子</th> <th>描述</th> </tr> <tr style="cursor: auto;"> @@ -77,7 +76,7 @@ cursor: unset; </tr> <tr style="cursor: default;"> <td><code>default</code></td> - <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="default.gif" src="default.gif"></td> <td>默认指针，通常是箭头。</td> </tr> <tr style="cursor: none;"> @@ -88,80 +87,80 @@ cursor: unset; <tr style="cursor: context-menu;"> <td rowspan="5" style="cursor: auto;">链接及状态</td> <td><code>context-menu</code></td> - <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td> + <td><img alt="context-menu.png" src="context-menu.png"></td> <td>指针下有可用内容目录。</td> </tr> <tr style="cursor: help;"> <td><code>help</code></td> - <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="help.gif" src="help.gif"></td> <td>指示帮助</td> </tr> <tr style="cursor: pointer;"> <td><code>pointer</code></td> - <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="pointer.gif" src="pointer.gif"></td> <td>悬浮于连接上时，通常为手</td> </tr> <tr style="cursor: progress;"> <td><code>progress</code></td> - <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="progress.gif" src="progress.gif"></td> <td>程序后台繁忙，用户仍可交互 (与<code>wait相反</code>).</td> </tr> <tr style="cursor: wait;"> <td><code>wait</code></td> - <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="wait.gif" src="wait.gif"></td> <td>程序繁忙，用户不可交互 (与<code>progress相反</code>).图标一般为沙漏或者表。</td> </tr> <tr style="cursor: cell;"> <td rowspan="4" style="cursor: auto;">选择</td> <td><code>cell</code></td> - <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="cell.gif" src="cell.gif"></td> <td>指示单元格可被选中</td> </tr> <tr style="cursor: crosshair;"> <td><code>crosshair</code></td> - <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="crosshair.gif" src="crosshair.gif"></td> <td>交叉指针，通常指示位图中的框选</td> </tr> <tr style="cursor: text;"> <td><code>text</code></td> - <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="text.gif" class="default" src="text.gif"></td> <td>指示文字可被选中</td> </tr> <tr style="cursor: vertical-text;"> <td><code>vertical-text</code></td> - <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="vertical-text.gif" src="vertical-text.gif"></td> <td>指示垂直文字可被选中</td> </tr> <tr style="cursor: alias;"> <td rowspan="7" style="cursor: auto;">拖拽</td> <td><code>alias</code></td> - <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="alias.gif" src="alias.gif"></td> <td>复制或快捷方式将要被创建</td> </tr> <tr style="cursor: copy;"> <td><code>copy</code></td> - <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="copy.gif" class="default" src="copy.gif"></td> <td>指示可复制</td> </tr> <tr style="cursor: move;"> <td><code>move</code></td> - <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="move.gif" src="move.gif"></td> <td>被悬浮的物体可被移动</td> </tr> <tr style="cursor: no-drop;"> <td><code>no-drop</code></td> - <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td> + <td><img alt="no-drop.gif" class="lwrap" src="no-drop.gif" style="float: left"></td> <td>当前位置不能扔下<br> {{ bug("275173") }}Windows或Mac OS X中 "no-drop 与not-allowed相同".</td> </tr> <tr style="cursor: not-allowed;"> <td><code>not-allowed</code></td> - <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="not-allowed.gif" src="not-allowed.gif"></td> <td>不能执行</td> </tr> <tr id="grab" style="cursor: grab;"> <td><code>grab</code></td> - <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td> + <td><img alt="grab.gif" class="default" src="grab.gif"></td> <td> <p>可抓取</p> @@ -170,89 +169,89 @@ cursor: unset; </tr> <tr style="cursor: grabbing;"> <td><code>grabbing</code></td> - <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td> + <td><img alt="grabbing.gif" class="default" src="grabbing.gif"></td> <td>抓取中</td> </tr> <tr style="cursor: all-scroll;"> <td rowspan="15" style="cursor: auto;">重设大小及滚动</td> <td><code>all-scroll</code></td> - <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="all-scroll.gif" src="all-scroll.gif"></td> <td>元素可任意方向滚动 （平移）.<br> {{ bug("275174") }}Windows中, "<em>all-scroll</em> 与 <em>move相同</em>".</td> </tr> <tr style="cursor: col-resize;"> <td><code>col-resize</code></td> - <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="col-resize.gif" src="col-resize.gif"></td> <td>元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头</td> </tr> <tr style="cursor: row-resize;"> <td><code>row-resize</code></td> - <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="row-resize.gif" src="row-resize.gif"></td> <td> <p>元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头</p> </td> </tr> <tr style="cursor: n-resize;"> <td><code>n-resize</code></td> - <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td> + <td><img alt="Example of a resize towards the top cursor" src="n-resize.gif" style="border-style: solid; border-width: 0px"></td> <td rowspan="8" style="cursor: auto;">某条边将被移动。例如元素盒的东南角被移动时<code>使用se-resize</code></td> </tr> <tr style="cursor: e-resize;"> <td><code>e-resize</code></td> - <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="Example of a resize towards the right cursor" src="e-resize.gif"></td> </tr> <tr style="cursor: s-resize;"> <td><code>s-resize</code></td> - <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="Example of a resize towards the bottom cursor " src="s-resize.gif"></td> </tr> <tr style="cursor: w-resize;"> <td><code>w-resize</code></td> - <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="Example of a resize towards the left cursor" src="w-resize.gif"></td> </tr> <tr style="cursor: ne-resize;"> <td><code>ne-resize</code></td> - <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="Example of a resize towards the top-right corner cursor" src="ne-resize.gif"></td> </tr> <tr style="cursor: nw-resize;"> <td><code>nw-resize</code></td> - <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="Example of a resize towards the top-left corner cursor" src="nw-resize.gif"></td> </tr> <tr style="cursor: se-resize;"> <td><code>se-resize</code></td> - <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="Example of a resize towards the bottom-right corner cursor" src="se-resize.gif"></td> </tr> <tr style="cursor: sw-resize;"> <td><code>sw-resize</code></td> - <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="Example of a resize towards the bottom-left corner cursor" src="sw-resize.gif"></td> </tr> <tr style="cursor: ew-resize;"> <td><code>ew-resize</code></td> - <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="3-resize.gif" class="default" src="3-resize.gif"></td> <td rowspan="4" style="cursor: auto;">指示双向重新设置大小</td> </tr> <tr style="cursor: ns-resize;"> <td><code>ns-resize</code></td> - <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="6-resize.gif" class="default" src="6-resize.gif"></td> </tr> <tr style="cursor: nesw-resize;"> <td><code>nesw-resize</code></td> - <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td> + <td><img alt="1-resize.gif" class="default" src="1-resize.gif"></td> </tr> <tr style="cursor: nwse-resize;"> <td><code>nwse-resize</code></td> - <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td> + <td><img alt="4-resize.gif" class="default" src="4-resize.gif"></td> </tr> <tr style="cursor: zoom-in;"> <td rowspan="2">缩放</td> <td><code>zoom-in</code></td> - <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td> + <td><img alt="zoom-in.gif" class="default" src="zoom-in.gif"></td> <td rowspan="2" style="cursor: auto;"> <p>指示可被放大或缩小</p> </td> </tr> <tr style="cursor: zoom-out;"> <td><code>zoom-out</code></td> - <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td> + <td><img alt="zoom-out.gif" class="default" src="zoom-out.gif"></td> </tr> </tbody> </table> @@ -263,7 +262,7 @@ cursor: unset; <dl> <dt> - {{csssyntax("cursor")}} + {{csssyntax}} </dt> </dl> @@ -290,31 +289,11 @@ cursor: unset; <h2 id="Specifications" name="Specifications">规范</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}</td> - <td>{{ Spec2('CSS3 UI') }}</td> - <td>增加了一些关键字，<code>url()的</code>位置语法</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>首次定义</td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> <h2 id="浏览器兼容性">浏览器兼容性</h2> -<p>{{Compat("css.properties.cursor")}}</p> +<p>{{Compat}}</p> <h2 id="See_also" name="See_also">参见</h2> diff --git a/files/zh-cn/web/css/display-internal/index.html b/files/zh-cn/web/css/display-internal/index.html index 463c4014f4..e735bee9bf 100644 --- a/files/zh-cn/web/css/display-internal/index.html +++ b/files/zh-cn/web/css/display-internal/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/display-internal --- <div> </div> -<p class="summary"><font><font>一些布局模型，例如 </font></font><code>table</code><font><font> 并且</font></font><code>ruby</code><font><font>具有复杂的内部结构，具有他们的孩子和后代可以填充的几个不同的角色。</font><font>此页面定义了那些“内部”显示值，这些值仅在该特定布局模式中具有意义。</font></font></p> +<p class="summary"><font><font>一些布局模型，例如 </font></font><code>table</code><font><font> 和 </font></font><code>ruby</code><font><font>具有复杂的内部结构，具有他们的孩子和后代可以填充的几个不同的角色。</font><font>此页面定义了那些“内部”显示值，这些值仅在该特定布局模式中具有意义。</font></font></p> <h2 id="语法">语法</h2> diff --git a/files/zh-cn/web/css/inheritance/index.html b/files/zh-cn/web/css/inheritance/index.html index 9cfa528f96..52c94642c8 100644 --- a/files/zh-cn/web/css/inheritance/index.html +++ b/files/zh-cn/web/css/inheritance/index.html @@ -38,18 +38,6 @@ translation_of: Web/CSS/inheritance <p>…文本 "emphasized text" 就没有边框，因为 {{ Cssxref("border-style") }} 属性的初始值为<code>none</code>。</p> -<p> {{ Cssxref("inherit") }} 关键字允许显式的声明继承性，它对继承和非继承属性都生效。</p> - -<p>可以使用 {{cssxref("all")}} 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如:</p> - -<pre class="brush: css">font { - all: revert; - font-size: 200%; - font-weight: bold; -}</pre> - -<p>这会将 {{cssxref("font")}} 属性的样式恢复为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表。然后它将字体大小加倍并应用 {{cssxref("font-weight")}} 属性 为<code>"bold"</code></p> - <h2 id="注意">注意</h2> <p>{{ Cssxref("inherit") }} 关键字允许显式的声明继承性，它对继承和非继承属性都生效。</p> diff --git a/files/zh-cn/web/css/vertical-align/index.html b/files/zh-cn/web/css/vertical-align/index.html index 3c55e414be..14acdecb59 100644 --- a/files/zh-cn/web/css/vertical-align/index.html +++ b/files/zh-cn/web/css/vertical-align/index.html @@ -60,7 +60,7 @@ p { </pre> </div> -<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p> +<p>{{EmbedLiveSample("vertical-align-inline", 1200, 160)}}</p> <ul> <li>垂直对齐表格单元内容:</li> @@ -99,7 +99,7 @@ td { </pre> </div> -<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p> +<p>{{EmbedLiveSample("vertical-align-table", 1200, 230)}}</p> <p>注意 <code>vertical-align</code> 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐<a href="/zh-CN/docs/Web/HTML/Block-level_elements">块级元素</a>。</p> |