diff --git a/files/zh-cn/games/techniques/controls_gamepad_api/index.md b/files/zh-cn/games/techniques/controls_gamepad_api/index.md index 29a5f3e5a77f86..0c8f3bb8b31972 100644 --- a/files/zh-cn/games/techniques/controls_gamepad_api/index.md +++ b/files/zh-cn/games/techniques/controls_gamepad_api/index.md @@ -27,7 +27,7 @@ slug: Games/Techniques/Controls_Gamepad_API 第二个隐藏的“改变”的实现是可以从单纯静态的冰箱改变成涡轮驱动、射击和吞食的机器能力。当你连接控制器后，游戏会有很明显的改变 (饥饿冰箱会变成超级涡轮的饥饿冰箱) 并且你可以使用 Gamepad API 来控制装甲冰箱。你需要击落食物但是你仍然需要找到冰箱目前想吃的食物，否则你会失去能量。 -游戏封装了两种截然不同的“变化”(change) ——好食物对坏食物，与移动端对桌面端。 +游戏封装了两种截然不同的“变化”（change）——好食物对坏食物，与移动端对桌面端。 ## 示例 @@ -214,11 +214,11 @@ if (gamepadAPI.axesStatus[0].x > 0.5) { ## 规范更新 -经过长达一年多的规范化，W3C Gamepaf API 于 2015 年 4 月更新了规范 ([查看最新信息](https://w3c.github.io/gamepad/))。更新的改动并不是很大，但是我们最好了解一下到底更新了些什么—— 以下为更新。 +经过长达一年多的规范化，W3C Gamepaf API 于 2015 年 4 月更新了规范 ([查看最新信息](https://w3c.github.io/gamepad/))。更新的改动并不是很大，但是我们最好了解一下到底更新了些什么——以下为更新。 ### 获取控制器 -{{domxref("Naviagator.getGamepads()")}} 方法已用[更长的说明和示例代码](https://w3c.github.io/gamepad/#navigator-interface-extension)更新。现在控制器数组的长度必须为 `n+1` ( `n` 是已连接设备的数量) —— 当设备连接且其有索引 1，数组长度为 2，那么它将会是这样： `[null, [object Gamepad]]`。如果设备被断开或不可用的话，值将被设为 `null`。 +{{domxref("Naviagator.getGamepads()")}} 方法已用[更长的说明和示例代码](https://w3c.github.io/gamepad/#navigator-interface-extension)更新。现在控制器数组的长度必须为 `n+1`（`n` 是已连接设备的数量）——当设备连接且其有索引 1，数组长度为 2，那么它将会是这样：`[null, [object Gamepad]]`。如果设备被断开或不可用的话，值将被设为 `null`。 ### 映射标准 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md index d7eaacbce8d7b1..02dfd5718efaeb 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md @@ -108,6 +108,6 @@ drawBricks(); ## 下一节 -现在，我们有砖啦！但是球根本就没有和它们互动 —— 接下来的第七章我们将让球和砖产生碰撞：[碰撞检测](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection)。 +现在，我们有砖啦！但是球根本就没有和它们互动——接下来的第七章我们将让球和砖产生碰撞：[碰撞检测](/zh-CN/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection)。 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}} diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md index 7fc24d71a90cf2..295b1328eadc42 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.md @@ -32,7 +32,7 @@ function mouseMoveHandler(e) { } ``` -在这个函数中，我们首先计算 `relativeX` 的值，它等于鼠标在视窗中的水平位置 (`e.clientX`) 减去 canvas 元素左边框到视窗左边框的距离 (`canvas.offsetLeft`) —— 这就得到了 canvas 元素左边框到鼠标的距离。若这个值大于零，且小于 canvas 的宽度，说明鼠标指针落在 canvas 边界内，这时就把 `paddleX` （等于球板左边缘的坐标）设为 `relativeX` 减速去球板宽度的一半。这样就确保位移是相对于球板中心进行的。 +在这个函数中，我们首先计算 `relativeX` 的值，它等于鼠标在视窗中的水平位置（`e.clientX`）减去 canvas 元素左边框到视窗左边框的距离（`canvas.offsetLeft`）——这就得到了 canvas 元素左边框到鼠标的距离。若这个值大于零，且小于 canvas 的宽度，说明鼠标指针落在 canvas 边界内，这时就把 `paddleX` （等于球板左边缘的坐标）设为 `relativeX` 减速去球板宽度的一半。这样就确保位移是相对于球板中心进行的。 现在球板将跟随鼠标指针。不过由于我们将球板移动限制在 canvas 大小范围内，它不会从两边完全消失。 diff --git a/files/zh-cn/learn/accessibility/html/index.md b/files/zh-cn/learn/accessibility/html/index.md index c17ba998ec5cbc..f70f2637d290f6 100644 --- a/files/zh-cn/learn/accessibility/html/index.md +++ b/files/zh-cn/learn/accessibility/html/index.md @@ -493,7 +493,7 @@ Fill in your name:

The Mozilla red Tyrannosaurus ...

``` -在这种情况下，我们不使用“alt”属性 —— 相反，我们已经将图像的描述作为常规文本段落给出，并给出它的“id”，然后使用“`aria-labelledby`”属性并链接到对应“`id`”，它使屏幕阅读器将该段落用作该图像的替代文本/标签。如果你想将相同的文本用作多个图像的标签，这是特别有用的 - 这是使用“`alt`”不可能实现的。 +在这种情况下，我们不使用“alt”属性——相反，我们已经将图像的描述作为常规文本段落给出，并给出它的“id”，然后使用“`aria-labelledby`”属性并链接到对应“`id`”，它使屏幕阅读器将该段落用作该图像的替代文本/标签。如果你想将相同的文本用作多个图像的标签，这是特别有用的——这是使用“`alt`”不可能实现的。 > **备注：** “`aria-labelledby`”是 [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) 规范的一部分，它允许开发人员在其标记中添加额外的语义，以提高屏幕阅读器的无障碍。要了解更多关于它是如何工作的，请阅读我们的 [WAI-ARIA Basics](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics) 文章。 diff --git a/files/zh-cn/learn/accessibility/multimedia/index.md b/files/zh-cn/learn/accessibility/multimedia/index.md index 364c91d1069082..8475e2a71ad1fd 100644 --- a/files/zh-cn/learn/accessibility/multimedia/index.md +++ b/files/zh-cn/learn/accessibility/multimedia/index.md @@ -5,7 +5,7 @@ slug: Learn/Accessibility/Multimedia {{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}} -可能导致无障碍问题（accessibility problems）的另一类内容是多媒体 ——视频，音频和图像内容需要提供适当的文本替代方式，以便辅助技术及其用户能够理解它们。本文展示了具体内容。 +可能导致无障碍（accessibility）问题的另一类内容是多媒体——视频、音频和图像内容需要提供适当的文本替代方式，以便辅助技术及其用户能够理解它们。本文展示了具体内容。 diff --git a/files/zh-cn/learn/accessibility/wai-aria_basics/index.md b/files/zh-cn/learn/accessibility/wai-aria_basics/index.md index 1f8b98c456d2c1..3f12bacba3fe68 100644 --- a/files/zh-cn/learn/accessibility/wai-aria_basics/index.md +++ b/files/zh-cn/learn/accessibility/wai-aria_basics/index.md @@ -197,7 +197,7 @@ WAI-ARIA 给浏览器增加了 [`role`](https://www.w3.org/TR/wai-aria-1.1/#role 问题在于现代 Web 应用程序通常不仅仅是静态文本——它们往往有很多动态更新内容，即通过 [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest)，[Fetch](/zh-CN/docs/Web/API/Fetch_API) 或[DOM API](/zh-CN/docs/Web/API/Document_Object_Model) 等机制重新加载整个页面的内容。这些有时被称为**实时区域**。 -我们来看一个小例子—— [aria-no-live.html](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-no-live.html) ([在线 demo](http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html))。在这个例子我们哟一个小的随机引用块： +我们来看一个小例子——[aria-no-live.html](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-no-live.html)（[在线 demo](http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html)）。在这个例子我们引用一个小的随机引用块： ```html
@@ -216,7 +216,7 @@ var intervalID = window.setInterval(showQuote, 10000); 这当然是可行的，但是对于无障碍可不友善——这种内容变化是不会被屏幕阅读器察觉到的，所以用户不会发现发生了什么。这是一个简单的例子，但你可以想象一下：如果你开发的一个复杂 UI 而且内容频繁变化的应用，例如聊天室，或者一个策略游戏的界面，或者一个实时更新的购物车展示。如果没有某种方式提示用户有内容更新，那就不可能以任何有效的方式来使用应用。 -幸运的是，WAI-ARIA 提供了一种有效的机制来发起提示 —— [`aria-live`](https://www.w3.org/TR/wai-aria-1.1/#aria-live)。将此应用于元素会让屏幕阅读器读出更新的内容。读取内容的紧急程度取决于属性值： +幸运的是，WAI-ARIA 提供了一种有效的机制来发起提示——[`aria-live`](https://www.w3.org/TR/wai-aria-1.1/#aria-live)。将此应用于元素会让屏幕阅读器读出更新的内容。读取内容的紧急程度取决于属性值： - `off`: 默认值，更新不会提醒。 - `polite`: 只有用户空闲的情况下提醒。 @@ -235,7 +235,7 @@ var intervalID = window.setInterval(showQuote, 10000); > **备注：** 当你用 `file://` 协议头来发 `XMLHttpRequest` 大部分浏览器会抛出 security exception。所以你可能要设置一个 web 服务器来作为请求源，例如，[使用 GitHub](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages)，或者设置一个本地服务器 [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/)。 -这里有一个附加的考虑—— 只读取更新的文本位。如果我们总是读出标题可能会很好，这样用户就可以记住正在读出的内容。为了能做到这个，我们增加了 [`aria-atomic`](https://www.w3.org/TR/wai-aria-1.1/#aria-atomic) 给 section。再次更新 `
`，像这样： +这里有一个附加的考虑——只读取更新的文本位。如果我们总是读出标题可能会很好，这样用户就可以记住正在读出的内容。为了能做到这个，我们增加了 [`aria-atomic`](https://www.w3.org/TR/wai-aria-1.1/#aria-atomic) 给 section。再次更新 `
`，像这样： ```html
@@ -355,7 +355,7 @@ function toggleMusician(bool) { ``` -这时候再用屏幕阅读器，这次你会听到短语 "Click me!, button" ——舒服了。 +这时候再用屏幕阅读器，这次你会听到短语“Click me!, button”——舒服了。 > **备注：** 别忘了无论如何用正确的语义化元素是最佳选择。如果你想创建一个按钮，你可用 {{htmlelement("button")}} 元素，你应该用 {{htmlelement("button")}} 元素！ @@ -365,9 +365,9 @@ function toggleMusician(bool) { 让我们来看看我们自己的一个例子。我们将返回到我们简单的绝对定位选项卡界面（请参阅我们的 CSS 和 JavaScript 无障碍的文章的 [Hiding things](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things) 段落），你可以在 [Tabbed info box example](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html)中找到它（[源码地址](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)）。 -这个例子在键盘无障碍方面运行良好 —— 你可以愉快地在不同选项卡之间进行 tab 并选择它们然后显示选项卡内容。它也是相当容易访问的 —— 你可以滚动浏览内容并使用标题进行导航，即使你无法看到屏幕上发生的事情。然而，内容并不明显 —— 屏幕阅读器目前将内容报告为链接列表，以及一些内容包含三个标题。它不会让你知道内容之间的关系。为用户提供有关内容结构的更多线索总是好的。 +这个例子在键盘无障碍方面运行良好——你可以愉快地在不同选项卡之间进行 tab 并选择它们然后显示选项卡内容。它也是相当容易访问的——你可以滚动浏览内容并使用标题进行导航，即使你无法看到屏幕上发生的事情。然而，内容并不明显——屏幕阅读器目前将内容报告为链接列表，以及一些内容包含三个标题。它不会让你知道内容之间的关系。为用户提供有关内容结构的更多线索总是好的。 -为了优化它，我们创建了一个新的例子，名为： [aria-tabbed-info-box.html](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-tabbed-info-box.html) ([看在线 demo](http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html)). 我们更新了选项卡式界面的结构，如下所示： +为了优化它，我们创建了一个新的示例，名为 [`aria-tabbed-info-box.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-tabbed-info-box.html)（[查看在线运行的实例](http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html)）。我们更新了选项卡式界面的结构，如下所示： ```html
    @@ -406,7 +406,7 @@ function toggleMusician(bool) { ``` -> **备注：** 这里最明显的变化是我们删除了最初在示例中出现的链接，并且只使用了列表项作为选项卡 - 这样做是因为它使屏幕阅读器用户不那么容易混淆（链接并不会跳转，它们只更改视图），它允许 大小修改/位置变化 一类的 feature 更好地工作 —— 当这些被放在链接上时，浏览器始终报告"1 of 1"，而不是"1 of 3 "，"2 of 3"等 +> **备注：** 这里最明显的变化是我们删除了最初在示例中出现的链接，并且只使用了列表项作为选项卡——这样做是因为它使屏幕阅读器用户不那么容易混淆（链接并不会跳转，它们只更改视图），它允许大小修改/位置变化一类的特性更好地工作——当这些被放在链接上时，浏览器始终报告“1 of 1”，而不是“1 of 3”、“2 of 3”等。 以下刚刚用上的新特性： diff --git a/files/zh-cn/learn/css/building_blocks/the_box_model/index.md b/files/zh-cn/learn/css/building_blocks/the_box_model/index.md index 6000f9bcda2e0b..d6ab8af80c5174 100644 --- a/files/zh-cn/learn/css/building_blocks/the_box_model/index.md +++ b/files/zh-cn/learn/css/building_blocks/the_box_model/index.md @@ -40,7 +40,7 @@ slug: Learn/CSS/Building_blocks/The_box_model ## 块级盒子（Block box）和 内联盒子（Inline box） -在 CSS 中我们广泛地使用两种“盒子” —— **块级盒子** (**block box**) 和 **内联盒子** (**inline box**)。这两种盒子会在**页面流**（page flow）和元素之间的关系方面表现出不同的行为： +在 CSS 中我们广泛地使用两种“盒子”——**块级盒子**（block box）和**内联盒子**（inline box）。这两种盒子会在**页面流**（page flow）和元素之间的关系方面表现出不同的行为： 一个被定义成块级的（block）盒子会表现出以下行为： @@ -74,13 +74,13 @@ slug: Learn/CSS/Building_blocks/The_box_model 当你进一步了解 css 布局的更多细节的时候，你会了解到 `flex`，和其他内部显示类型会用到的值，例如 [`grid`](/zh-CN/docs/Learn/CSS/CSS_layout/Grids) 。 -块级和内联布局是 web 上默认的行为 —— 正如上面所述，它有时候被称为 _正常文档流_，因为如果没有其他说明，我们的盒子布局默认是块级或者内联。 +块级和内联布局是 web 上默认的行为——正如上面所述，它有时候被称为 _正常文档流_，因为如果没有其他说明，我们的盒子布局默认是块级或者内联。 ## 不同显示类型的例子 让我们继续看看别的例子。下面三个 html 元素，都有一个外部显示类型 `block`。第一个是一个段落，在 CSS 中加了边框。浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行。 -第二个是一个列表，布局属性是 `display: flex`。将在容器中建立一个 flex 布局，但是每个列表是一个块级元素 —— 像段落一样 —— 会充满整个容器的宽度并且换行。 +第二个是一个列表，布局属性是 `display: flex`。将在容器中建立一个 flex 布局，但是每个列表是一个块级元素——像段落一样——会充满整个容器的宽度并且换行。 下面有个块级段落，里面有两个 `` 元素。正常情况下是 `inline`，但是其中一个加了 block 类，设置属性 `display: block`。 @@ -102,7 +102,7 @@ slug: Learn/CSS/Building_blocks/The_box_model ## 什么是 CSS 盒模型？ -完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。 +完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分——margin、border、padding 和 content——合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。 ### 盒模型的各个部分 @@ -137,7 +137,7 @@ CSS 中组成一个块级盒子需要： ![Showing the size of the box when the standard box model is being used.](standard-box-model.png) -> **备注：** margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到 margin。 +> **备注：** margin 不计入实际大小——当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止——不会延伸到 margin。 ### 替代（IE）盒模型 @@ -166,7 +166,7 @@ html { } ``` -> **备注：** 一个有趣的历史记录 ——Internet Explorer 默认使用替代盒模型，没有可用的机制来切换。（译者注：IE8+ 支持使用 `box-sizing` 进行切换） +> **备注：** 一个有趣的历史记录——Internet Explorer 默认使用替代盒模型，没有可用的机制来切换。（译者注：IE8+ 支持使用 `box-sizing` 进行切换） ## 玩转盒模型 diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.md b/files/zh-cn/learn/css/css_layout/introduction/index.md index 0a9075d070474c..1d574d60d9e2f4 100644 --- a/files/zh-cn/learn/css/css_layout/introduction/index.md +++ b/files/zh-cn/learn/css/css_layout/introduction/index.md @@ -661,7 +661,7 @@ HTML 表格对于显示表格数据是很好的，但是很多年前——在浏 现在，我们例子中的 CSS。除了使用 {{cssxref("display")}} 属性外，大多数 CSS 都是相当普通的。 {{htmlelement("form")}}, {{htmlelement("div")}}, {{htmlelement("label")}}和{{htmlelement("input")}}被告知要分别显示表、表行和表单元——基本上，它们会像 HTML 表格标记一样，导致标签和输入在默认情况下排列整齐。我们所要做的就是添加一些大小、边缘等等，让一切看起来都好一点，我们就完成了。 -你会注意到标题段落已经给出了 `display: table-caption;`——这使得它看起来就像一个表格{{htmlelement("caption")}} ——同时出于设计需要，我们通过`caption-side: bottom;` 告诉标题应该展示在表格的底部，即使这个{{htmlelement("p")}}标记在源码中是在``之前。这就能让你有一点灵活的弹性。 +你会注意到标题段落已经给出了 `display: table-caption;`——这使得它看起来就像一个表格 {{htmlelement("caption")}}——同时出于设计需要，我们通过 `caption-side: bottom;` 告诉标题应该展示在表格的底部，即使这个 {{htmlelement("p")}} 标记在源码中是在 `` 之前。这就能让你有一点灵活的弹性。 ```css html { diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.md b/files/zh-cn/learn/css/css_layout/positioning/index.md index 8f55828165ac7a..98c0e83b105ccf 100644 --- a/files/zh-cn/learn/css/css_layout/positioning/index.md +++ b/files/zh-cn/learn/css/css_layout/positioning/index.md @@ -104,7 +104,7 @@ span { ### 静态定位 -静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。 +静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置——这里没有什么特别的。 为了演示这一点，并为以后的部分设置示例，首先在 HTML 中添加一个`positioned` 的 `class` 到第二个{{htmlelement("p")}}： @@ -144,7 +144,7 @@ top: 30px; left: 30px; ``` -> **备注：** 这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。 +> **备注：** 这些属性的值可以采用逻辑上期望的任何单位——px、mm、rem、% 等。 如果你现在保存和刷新，你会得到一个这样的结果： @@ -292,7 +292,7 @@ span { 如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static。结果，绝对定位元素会被包含在**初始块容器**中。这个初始块容器有着和浏览器视口一样的尺寸，并且\元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在\元素的外面，并且根据浏览器视口来定位。 -绝对定位元素在 HTML 源代码中，是被放在\中的，但是在最终的布局里面，它离页面 (而不是\) 的左边界、上边界有 30px 的距离。我们可以改变**定位上下文** —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。为了演示这一点，将以下声明添加到你的 body 规则中： +绝对定位元素在 HTML 源代码中，是被放在 \ 中的，但是在最终的布局里面，它离页面（而不是 \）的左边界、上边界有 30px 的距离。我们可以改变**定位上下文**——绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性——也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。为了演示这一点，将以下声明添加到你的 body 规则中： ```css position: relative; @@ -363,7 +363,7 @@ span { ### 介绍 z-index -所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。当我们有不止一个的时候呢？ +所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。当我们有不止一个的时候呢？ 尝试添加以下到你的 CSS，使第一段也是绝对定位： @@ -455,7 +455,7 @@ p:nth-of-type(1) { {{ EmbedLiveSample('介绍 z-index', '100%', 400) }} -请注意，z-index 只接受无单位索引值；你不能指定你想要一个元素是 Z 轴上 23 像素—— 它不这样工作。较高的值将高于较低的值，这取决于你使用的值。使用 2 和 3 将产生与 300 和 40000 相同的效果。 +请注意，z-index 只接受无单位索引值；你不能指定你想要一个元素是 Z 轴上 23 像素——它不这样工作。较高的值将高于较低的值，这取决于你使用的值。使用 2 和 3 将产生与 300 和 40000 相同的效果。 > **备注：** 你可以在这里看到这个例子 [`5_z-index.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/5_z-index.html)). diff --git a/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md b/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md index f5d1e2c3a9acbd..ead250df831a6b 100644 --- a/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.md @@ -41,7 +41,7 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples > **备注：** 一些网络开发者甚至更超前，每次只加载一页的信息，并且使用 JavaScript 诸如 [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest)特征动态改变信息显示。但是，在你此时的学习中，我们希望尽可能保持简单。接下来会有一些 JavaScript，但是只有一点。 -在开始之前，我们需要你拷贝文件到本地，当作起始的 HTML 文件—— [info-box-start.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box-start.html). 保存到你的计算机合适的位置，然后在你的编辑器里打开。让我们看看包含在 body 里的 HTML 代码： +在开始之前，我们需要你拷贝文件到本地，当作起始的 HTML 文件——[info-box-start.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box-start.html)。保存到你的计算机合适的位置，然后在你的编辑器里打开。让我们看看包含在 body 里的 HTML 代码： ```html
    @@ -427,7 +427,7 @@ aside { ### 设置选择后的状态 -这是最后要添加的一点 CSS ——把这些放到你的 CSS 底部： +这是最后要添加的一点 CSS——把这些放到你的 CSS 底部： ```css input[type="checkbox"]:checked + aside { @@ -437,7 +437,7 @@ input[type="checkbox"]:checked + aside { 这里的选择器是复杂的——我们选择与 `` 元素邻接的 `