From ac636d968c32ebce510947b6a713a3c59a2673ae Mon Sep 17 00:00:00 2001 From: meowmeowmeowcat Date: Tue, 10 Aug 2021 08:33:41 +0800 Subject: Fix live samples in Learn/CSS, zh-CN (#1961) * Fix broken live examples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples * Fix broken live samples --- files/zh-cn/learn/css/css_layout/grids/index.html | 54 ++++++++++++++-------- .../learn/css/css_layout/introduction/index.html | 12 ++--- .../learn/css/css_layout/positioning/index.html | 31 +++++++------ 3 files changed, 58 insertions(+), 39 deletions(-) (limited to 'files/zh-cn/learn/css/css_layout') diff --git a/files/zh-cn/learn/css/css_layout/grids/index.html b/files/zh-cn/learn/css/css_layout/grids/index.html index ab825e40e4..15b54cd485 100644 --- a/files/zh-cn/learn/css/css_layout/grids/index.html +++ b/files/zh-cn/learn/css/css_layout/grids/index.html @@ -83,10 +83,11 @@ translation_of: Learn/CSS/CSS_layout/Grids

在规则里加入你的第二个声明。刷新页面后，你会看到子项们排进了新定义的网格中。

+
+

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

@@ -138,10 +140,11 @@ translation_of: Learn/CSS/CSS_layout/Grids

这个定义里，第一列被分配了2fr可用空间，余下的两列各被分配了1fr的可用空间，这会使得第一列的宽度是第二第三列的两倍。另外，fr可以与一般的长度单位混合使用，比如grid-template-columns: 300px 2fr 1fr，那么第一列宽度是300px，剩下的两列会根据除去300px后的可用空间按比例分配。

+
+

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

@@ -190,10 +194,11 @@ translation_of: Learn/CSS/CSS_layout/Grids

间隙距离可以用任何长度单位包括百分比来表示，但不能使用fr单位。

+
+

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

@@ -259,10 +265,11 @@ translation_of: Learn/CSS/CSS_layout/Grids

译者注：简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。

+
-
.container {
+
.container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
   grid-gap: 20px;
 }

+

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

@@ -318,10 +326,11 @@ translation_of: Learn/CSS/CSS_layout/Grids

在你的文件中试试看，你也许可以用到以下的代码。

+
-
.container {
+
.container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   grid-auto-rows: minmax(100px, auto);
   grid-gap: 20px;
 }

+

{{ EmbedLiveSample('Grid_5', '100%', 400) }}

@@ -404,10 +414,11 @@ footer { grid-row: 3; } +
+

{{ EmbedLiveSample('Grid_6', '100%', 400) }}

@@ -508,10 +520,11 @@ footer {

刷新页面，然后你应该能看到的元素会被放到与之前相同的地方，整个过程不需要我们指定任何分隔线序号。

+
+

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

@@ -612,10 +626,11 @@ footer { grid-row: 3; } +
+

{{ EmbedLiveSample('Grid_8', '100%', 400) }}

diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.html b/files/zh-cn/learn/css/css_layout/introduction/index.html index a96e967bad..6a0b707111 100644 --- a/files/zh-cn/learn/css/css_layout/introduction/index.html +++ b/files/zh-cn/learn/css/css_layout/introduction/index.html @@ -50,7 +50,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。

-

正常布局流(Normal flow)

+

正常布局流(Normal flow)

正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我们快速地看一个HTML的例子：

@@ -66,7 +66,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction

默认情况下，浏览器的显示如下:

-

{{ EmbedLiveSample('正常布局流Normal_flow', '100%', 200) }}

+

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。

@@ -349,7 +349,7 @@ p {
  • 粘性定位(Sticky positioning)是一种新的定位方式，它会让元素先保持和position: static一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像position: fixed一样定位。
    • -

    简单定位示例

    +

    简单定位示例

    我们将展示一些示例代码来熟悉这些布局技术. 这些示例代码都作用在下面这一个相同的HTML上：

    @@ -376,7 +376,7 @@ p {

    渲染效果如下:

    -

    {{ EmbedLiveSample('简单定位示例', '100%', 300) }}

    +

    {{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}

    相对定位

    @@ -581,7 +581,7 @@ p {

    注意: 想要发现更多关于定位的信息，请参阅我们的Positioning和Practical positioning examples文章。

    -

    表格布局

    +

    表格布局

    HTML表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。

    @@ -649,7 +649,7 @@ form p {

    结果如下：

    -

    {{ EmbedLiveSample('CSS_表格', '100%', '170') }}

    +

    {{ EmbedLiveSample('Table_layout', '100%', '170') }}

    你可以在 css-tables-example.html 看到预览版 (也可以见源码)

    diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.html b/files/zh-cn/learn/css/css_layout/positioning/index.html index d5e21680d0..c49c904ac4 100644 --- a/files/zh-cn/learn/css/css_layout/positioning/index.html +++ b/files/zh-cn/learn/css/css_layout/positioning/index.html @@ -33,7 +33,7 @@ original_slug: Learn/CSS/CSS_layout/定位 -

    文档流

    +

    文档流

    定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。

    @@ -74,7 +74,7 @@ span { border: 1px solid black; } -

    {{ EmbedLiveSample('文档流', '100%', 500) }}

    +

    {{ EmbedLiveSample('basic-flow', '100%', 500) }}

    在我们阅读本文时，我们将多次重复这个例子，因为我们要展示不同定位选项的效果。

    @@ -115,7 +115,7 @@ span {

    如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}属性 ，我们将在下一节中解释。

    -

    介绍 top, bottom, left,  right

    +

    介绍 top, bottom, left,  right

    {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, 和 {{cssxref("right")}} 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 .positioned 规则中添加以下声明：

    @@ -164,7 +164,7 @@ span { } -

    {{ EmbedLiveSample('介绍_top_bottom_left_right', '100%', 500) }}

    +

    {{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}

    酷，是吗？ 好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？ 听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 top: 30px;一个力推动框的顶部，使它向下移动30px。

    @@ -172,7 +172,7 @@ span {

    注意： 你可以在 2_relative-positioning.html 查看这个例子 (see source code)。

    -

    绝对定位

    +

    绝对定位

    绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：

    @@ -216,7 +216,7 @@ span { } -

    {{ EmbedLiveSample('绝对定位', '100%', 420) }}

    +

    {{ EmbedLiveSample('Absolute_positioning', '100%', 450) }}

    首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经靠在一起，就像第二个元素不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……

    @@ -234,7 +234,7 @@ span {

    注意：你可以在3_absolute-positioning.html 查看这个例子(see source code)。

    -

    定位上下文

    +

    定位上下文

    哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 Identifying the containing block).

    @@ -283,7 +283,7 @@ span { } -

    {{ EmbedLiveSample('定位上下文', '100%', 420) }}

    +

    {{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}

    定位的元素现在相对于{{htmlelement("body")}}元素。

    @@ -291,7 +291,7 @@ span {

    注意：你可以在这里看到这个例子 4_positioning-context.html (see source code).

    -

    介绍 z-index

    +

    介绍 z-index

    所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？ 在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢？

    @@ -362,7 +362,7 @@ p:nth-of-type(1) { -

    {{ EmbedLiveSample('介绍_z-index', '100%', 400) }}

    +

    {{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}

    请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。

    @@ -370,7 +370,7 @@ p:nth-of-type(1) {

    注意：你可以在这里看到这个例子 5_z-index.html (see source code).

    -

    固定定位

    +

    固定定位

    还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 {{htmlelement("html")}} 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

    @@ -448,7 +448,7 @@ p:nth-of-type(1) { } -

    {{ EmbedLiveSample('固定定位', '100%', 400) }}

    +

    {{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}

    注意：你可以在这里看到这个例子6_fixed-positioning.html (see source code).

    @@ -458,6 +458,7 @@ p:nth-of-type(1) {

    还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起1​​0像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

    +

    {{ EmbedLiveSample('Sticky_1', '100%', 200) }}

    @@ -539,8 +541,9 @@ p:nth-of-type(1) { } +