From 623c5ce17a3d601e3b83bc97e6842f304708f0c8 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Fri, 28 Jul 2023 20:06:41 -0700 Subject: [PATCH] zh-cn: Format /web/css using Prettier (part 3) (#14661) Co-authored-by: A1lo --- .../margins_borders_padding/index.md | 22 +- .../sizing/index.md | 2 +- .../using_multicol_layouts/index.md | 87 ++++---- .../stacking_context/index.md | 82 +++---- .../stacking_context_example_1/index.md | 56 ++--- .../stacking_context_example_2/index.md | 149 +++++++------ .../stacking_context_example_3/index.md | 171 +++++++------- .../stacking_floating_elements/index.md | 59 +++-- .../stacking_without_z-index/index.md | 189 ++++++++-------- .../using_z-index/index.md | 203 +++++++++-------- .../web/css/css_scrollbars_styling/index.md | 10 +- files/zh-cn/web/css/css_selectors/index.md | 13 ++ .../index.md | 6 +- .../using_css_transitions/index.md | 13 +- .../web/css/css_values_and_units/index.md | 4 +- files/zh-cn/web/css/cursor/index.md | 13 +- files/zh-cn/web/css/direction/index.md | 4 +- files/zh-cn/web/css/display-box/index.md | 3 + files/zh-cn/web/css/display-outside/index.md | 7 +- files/zh-cn/web/css/display/index.md | 6 +- files/zh-cn/web/css/empty-cells/index.md | 2 +- files/zh-cn/web/css/env/index.md | 50 +++-- .../web/css/fit-content_function/index.md | 4 +- files/zh-cn/web/css/flex-basis/index.md | 19 +- files/zh-cn/web/css/flex-direction/index.md | 12 +- files/zh-cn/web/css/flex-grow/index.md | 6 +- files/zh-cn/web/css/flex-shrink/index.md | 4 +- files/zh-cn/web/css/flex/index.md | 6 +- files/zh-cn/web/css/float/index.md | 44 ++-- files/zh-cn/web/css/font-family/index.md | 59 ++--- .../web/css/font-feature-settings/index.md | 32 ++- files/zh-cn/web/css/font-kerning/index.md | 8 +- .../web/css/font-language-override/index.md | 8 +- files/zh-cn/web/css/font-size-adjust/index.md | 7 +- files/zh-cn/web/css/font-size/index.md | 2 + files/zh-cn/web/css/font-stretch/index.md | 32 ++- files/zh-cn/web/css/font-synthesis/index.md | 2 +- .../web/css/font-variant-alternates/index.md | 4 +- .../web/css/font-variant-ligatures/index.md | 38 ++-- .../web/css/font-variant-numeric/index.md | 16 +- .../web/css/font-variation-settings/index.md | 10 +- files/zh-cn/web/css/font-weight/index.md | 14 +- files/zh-cn/web/css/font/index.md | 14 +- files/zh-cn/web/css/gap/index.md | 6 +- .../web/css/gradient/conic-gradient/index.md | 17 +- files/zh-cn/web/css/gradient/index.md | 30 ++- .../web/css/gradient/linear-gradient/index.md | 50 ++++- .../web/css/gradient/radial-gradient/index.md | 21 +- .../repeating-linear-gradient/index.md | 102 +++++++-- .../repeating-radial-gradient/index.md | 87 ++++++-- files/zh-cn/web/css/grid-area/index.md | 4 +- files/zh-cn/web/css/grid-auto-flow/index.md | 4 +- .../web/css/grid-template-areas/index.md | 12 +- .../web/css/grid-template-columns/index.md | 17 +- .../zh-cn/web/css/grid-template-rows/index.md | 17 +- files/zh-cn/web/css/grid-template/index.md | 26 ++- .../web/css/hanging-punctuation/index.md | 8 +- files/zh-cn/web/css/height/index.md | 4 +- .../web/css/hue-interpolation-method/index.md | 16 +- files/zh-cn/web/css/image/index.md | 14 +- files/zh-cn/web/css/inherit/index.md | 12 +- files/zh-cn/web/css/inheritance/index.md | 10 +- files/zh-cn/web/css/isolation/index.md | 2 +- files/zh-cn/web/css/justify-content/index.md | 23 +- files/zh-cn/web/css/justify-items/index.md | 12 +- files/zh-cn/web/css/justify-self/index.md | 19 +- .../contribute_a_recipe/index.md | 14 +- files/zh-cn/web/css/layout_cookbook/index.md | 24 +- files/zh-cn/web/css/left/index.md | 26 ++- files/zh-cn/web/css/length/index.md | 35 ++- files/zh-cn/web/css/letter-spacing/index.md | 22 +- files/zh-cn/web/css/line-height/index.md | 28 ++- files/zh-cn/web/css/list-style-image/index.md | 8 +- .../web/css/list-style-position/index.md | 11 +- files/zh-cn/web/css/list-style-type/index.md | 8 +- files/zh-cn/web/css/margin-bottom/index.md | 38 ++-- .../web/css/margin-inline-start/index.md | 6 +- files/zh-cn/web/css/margin-left/index.md | 22 +- files/zh-cn/web/css/margin-right/index.md | 22 +- files/zh-cn/web/css/margin-top/index.md | 2 +- files/zh-cn/web/css/margin/index.md | 30 +-- files/zh-cn/web/css/mask-border/index.md | 19 +- files/zh-cn/web/css/mask-mode/index.md | 3 +- files/zh-cn/web/css/mask-repeat/index.md | 18 +- files/zh-cn/web/css/mask/index.md | 16 +- files/zh-cn/web/css/max-content/index.md | 8 +- files/zh-cn/web/css/max-height/index.md | 8 +- files/zh-cn/web/css/max/index.md | 4 +- files/zh-cn/web/css/min-content/index.md | 4 +- files/zh-cn/web/css/min-height/index.md | 8 +- files/zh-cn/web/css/min-width/index.md | 8 +- files/zh-cn/web/css/min/index.md | 10 +- files/zh-cn/web/css/minmax/index.md | 10 +- files/zh-cn/web/css/mix-blend-mode/index.md | 209 ++++++++++++------ files/zh-cn/web/css/object-fit/index.md | 24 +- files/zh-cn/web/css/opacity/index.md | 25 ++- files/zh-cn/web/css/order/index.md | 29 ++- files/zh-cn/web/css/outline-color/index.md | 6 +- files/zh-cn/web/css/outline-offset/index.md | 2 +- files/zh-cn/web/css/outline-style/index.md | 20 +- 100 files changed, 1573 insertions(+), 1159 deletions(-) diff --git a/files/zh-cn/web/css/css_logical_properties_and_values/margins_borders_padding/index.md b/files/zh-cn/web/css/css_logical_properties_and_values/margins_borders_padding/index.md index 3a4f92100dbb5e..281d2446715892 100644 --- a/files/zh-cn/web/css/css_logical_properties_and_values/margins_borders_padding/index.md +++ b/files/zh-cn/web/css/css_logical_properties_and_values/margins_borders_padding/index.md @@ -15,7 +15,7 @@ slug: Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding 如果你用了 `horizontal-tb` 的书写模式和从右到左的行内方向，那么 {{CSSXref("margin-inline-start")}} 会和 {{CSSXref("margin-right")}} 一样，而在竖排书写模式里 {{CSSXref("margin-inline-start")}} 会和用 {{CSSXref("margin-top")}} 一样。 -| 逻辑属性 | 实体属性 | +| 逻辑属性 | 实体属性 | | ---------------------------------------- | ----------------------------------------- | | {{CSSXref("border-block-end")}} | {{CSSXref("border-bottom")}} | | {{CSSXref("border-block-end-color")}} | {{CSSXref("border-bottom-color")}} | @@ -48,20 +48,20 @@ slug: Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding 还有一些简写属性可以用于让我们同时设置盒子块向或者行向的两侧。这些简写属性没有等价的实体属性。 -| 属性 | 用途 | -| ---------------------------------- | -------------------------------------------------------------------------------------------------------- | +| 属性 | 用途 | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------ | | {{CSSXref("border-block")}} | 为两个块向边框设置 {{CSSXref("border-color")}}、{{CSSXref("border-style")}} 和 {{CSSXref("border-width")}}。 | -| {{CSSXref("border-block-color")}} | 为两个块向边框设置 `border-color`。 | -| {{CSSXref("border-block-style")}} | 为两个块向边框设置 `border-style`。 | -| {{CSSXref("border-block-width")}} | 为两个块向边框设置 `border-width`。 | +| {{CSSXref("border-block-color")}} | 为两个块向边框设置 `border-color`。 | +| {{CSSXref("border-block-style")}} | 为两个块向边框设置 `border-style`。 | +| {{CSSXref("border-block-width")}} | 为两个块向边框设置 `border-width`。 | | {{CSSXref("border-inline")}} | 为两个行向边框设置 `border-color`、`border-style` 和 `border-width`。 | -| {{CSSXref("border-inline-color")}} | 为两个行向边框设置 `border-color`。 | -| {{CSSXref("border-inline-style")}} | 为两个行向边框设置 `border-style`。 | -| {{CSSXref("border-inline-width")}} | 为两个行向边框设置 `border-width`。 | +| {{CSSXref("border-inline-color")}} | 为两个行向边框设置 `border-color`。 | +| {{CSSXref("border-inline-style")}} | 为两个行向边框设置 `border-style`。 | +| {{CSSXref("border-inline-width")}} | 为两个行向边框设置 `border-width`。 | | {{CSSXref("margin-block")}} | 设置所有块向外边距（{{CSSXref("margin")}}）。 | | {{CSSXref("margin-inline")}} | 设置所有行向外边距（`margin`）。 | -| {{CSSXref("padding-block")}} | 设置块向内边距（{{CSSXref("padding")}}）。 | -| {{CSSXref("padding-inline")}} | 设置行向内边距（`padding`）。 | +| {{CSSXref("padding-block")}} | 设置块向内边距（{{CSSXref("padding")}}）。 | +| {{CSSXref("padding-inline")}} | 设置行向内边距（`padding`）。 | ## 外边距示例 diff --git a/files/zh-cn/web/css/css_logical_properties_and_values/sizing/index.md b/files/zh-cn/web/css/css_logical_properties_and_values/sizing/index.md index 49f9e92d01b12c..4609d30e6187e2 100644 --- a/files/zh-cn/web/css/css_logical_properties_and_values/sizing/index.md +++ b/files/zh-cn/web/css/css_logical_properties_and_values/sizing/index.md @@ -15,7 +15,7 @@ slug: Web/CSS/CSS_logical_properties_and_values/Sizing 假如你在竖排书写模式里，那么 {{CSSXref("inline-size")}} 会对应到 {{CSSXref("height")}}。 -| 逻辑属性 | 实体属性 | +| 逻辑属性 | 实体属性 | | ------------------------------ | ------------------------- | | {{CSSXref("inline-size")}} | {{CSSXref("width")}} | | {{CSSXref("block-size")}} | {{CSSXref("height")}} | diff --git a/files/zh-cn/web/css/css_multicol_layout/using_multicol_layouts/index.md b/files/zh-cn/web/css/css_multicol_layout/using_multicol_layouts/index.md index 1eb28c5d90abe6..ee807f650638fb 100644 --- a/files/zh-cn/web/css/css_multicol_layout/using_multicol_layouts/index.md +++ b/files/zh-cn/web/css/css_multicol_layout/using_multicol_layouts/index.md @@ -24,21 +24,20 @@ slug: Web/CSS/CSS_multicol_layout/Using_multicol_layouts ```html

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua.

- Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat.

- Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore + eu fugiat nulla pariatur.

- Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum.

``` @@ -65,14 +64,12 @@ slug: Web/CSS/CSS_multicol_layout/Using_multicol_layouts ```html
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum
``` @@ -104,14 +101,12 @@ CSS 声明 `column-width: 12em` 可替换成 `columns: 12em`。 ```html
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum
``` @@ -133,14 +128,12 @@ CSS 声明 `column-count: 4` 可替换成 `columns: 4`。 ```html
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum
``` @@ -164,14 +157,12 @@ CSS 声明 `column-width: 8em` 和 `column-count: 12` 可替换成 `columns: 12 ```html
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum
``` @@ -203,14 +194,12 @@ CSS3 多列规范需要列高平衡：即，浏览器自动设置最大列高， ```html
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum
``` diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md index 69b024662d8ba2..caaf0a42c89936 100644 --- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md +++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md @@ -125,70 +125,72 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context ```css * { - margin: 0; + margin: 0; } html { - padding: 20px; - font: 12px/20px Arial, sans-serif; + padding: 20px; + font: + 12px/20px Arial, + sans-serif; } div { - opacity: 0.7; - position: relative; + opacity: 0.7; + position: relative; } h1 { - font: inherit; - font-weight: bold; + font: inherit; + font-weight: bold; } #div1, #div2 { - border: 1px dashed #696; - padding: 10px; - background-color: #cfc; + border: 1px dashed #696; + padding: 10px; + background-color: #cfc; } #div1 { - z-index: 5; - margin-bottom: 190px; + z-index: 5; + margin-bottom: 190px; } #div2 { - z-index: 2; + z-index: 2; } #div3 { - z-index: 4; - opacity: 1; - position: absolute; - top: 40px; - left: 180px; - width: 330px; - border: 1px dashed #900; - background-color: #fdd; - padding: 40px 20px 20px; + z-index: 4; + opacity: 1; + position: absolute; + top: 40px; + left: 180px; + width: 330px; + border: 1px dashed #900; + background-color: #fdd; + padding: 40px 20px 20px; } #div4, #div5 { - border: 1px dashed #996; - background-color: #ffc; + border: 1px dashed #996; + background-color: #ffc; } #div4 { - z-index: 6; - margin-bottom: 15px; - padding: 25px 10px 5px; + z-index: 6; + margin-bottom: 15px; + padding: 25px 10px 5px; } #div5 { - z-index: 1; - margin-top: 15px; - padding: 5px 10px; + z-index: 1; + margin-top: 15px; + padding: 5px 10px; } #div6 { - z-index: 3; - position: absolute; - top: 20px; - left: 180px; - width: 150px; - height: 125px; - border: 1px dashed #009; - padding-top: 125px; - background-color: #ddf; - text-align: center; + z-index: 3; + position: absolute; + top: 20px; + left: 180px; + width: 150px; + height: 125px; + border: 1px dashed #009; + padding-top: 125px; + background-color: #ddf; + text-align: center; } ``` diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md index 4242231defdea6..557afeba4a343b 100644 --- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md +++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md @@ -66,41 +66,41 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_examp ```css .bold { - font-weight: bold; - font: 12px Arial; + font-weight: bold; + font: 12px Arial; } #div1, #div3 { - height: 80px; - position: relative; - border: 1px dashed #669966; - background-color: #ccffcc; - padding-left: 5px; + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; } #div2 { - opacity: 0.8; - z-index: 1; - position: absolute; - width: 150px; - height: 200px; - top: 20px; - left: 170px; - border: 1px dashed #990000; - background-color: #ffdddd; - text-align: center; + opacity: 0.8; + z-index: 1; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; } #div4 { - opacity: 0.8; - z-index: 2; - position: absolute; - width: 200px; - height: 70px; - top: 65px; - left: 50px; - border: 1px dashed #000099; - background-color: #ddddff; - text-align: left; - padding-left: 10px; + opacity: 0.8; + z-index: 2; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; } ``` diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md index 997558a87494c1..905762f00df0fa 100644 --- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md +++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md @@ -29,83 +29,94 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_examp ### 示例源码 ```html - + - - - - + + + + +
-

- DIV #1
- position: relative; -

- DIV #2
- position: absolute;
- z-index: 2; -
+
+
+ DIV #1
+ position: relative; +
+
+ DIV #2
+ position: absolute;
+ z-index: 2; +

-

- DIV #3
- position: relative;
- z-index: 1; -

- DIV #4
- position: absolute;
- z-index: 10; -
+
+
+ DIV #3
+ position: relative;
+ z-index: 1; +
+
+ DIV #4
+ position: absolute;
+ z-index: 10; +
- - + ``` diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md index 5268e7737e4534..d0187d76024a3f 100644 --- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md +++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md @@ -48,74 +48,73 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_examp ### 示例源码 ```html - + - - - - -
- -
-LEVEL #1 - -
- -
-
LEVEL #2 -
z-index: 1; - -
- + + + + + +
+ +
+ LEVEL #1 + +
+
+
LEVEL #2
z-index: 1; + +
LEVEL #3
LEVEL #3
LEVEL #3
@@ -127,32 +126,28 @@ div.lev3 {
LEVEL #3
LEVEL #3
LEVEL #3
+
+
-
- -
- -
-
LEVEL #2 -
z-index: 1; +
+
LEVEL #2
z-index: 1; +
+
-
-
- -
-LEVEL #1 -
- -
-LEVEL #1 -
+
+ LEVEL #1 +
-
-LEVEL #1 -
+
+ LEVEL #1 +
- +
+ LEVEL #1 +
+ + ``` ### 相关文章 diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md index 2d8a00c5ffd7bf..03d166498833b1 100644 --- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md +++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md @@ -31,20 +31,21 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elem ### 该示例的源码 ```html - + - - + + Stacking and float - + } + + - +

-
DIV #1 -
position: absolute; +
DIV #1
position: absolute;
-
DIV #2 -
float: left; +
DIV #2
float: left;
-
DIV #3 -
float: right; +
DIV #3
float: right;

-
DIV #4 -
no positioning +
DIV #4
no positioning
-
DIV #5 -
position: absolute; +
DIV #5
position: absolute;
- + ``` diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md index ef05d4182b9e50..bbb55d12f698fc 100644 --- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md +++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md @@ -23,104 +23,99 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-ind ### 示例 ```html - + - - - - -

- -
-
DIV #1 -
position: absolute; -
- -
-
DIV #2 -
position: relative; -
- -
-
DIV #3 -
position: relative; -
- -
-
DIV #4 -
position: absolute; -
- -
-
DIV #5 -
no positioning -
- - + + + + + +

+ +
+
DIV #1
position: absolute; +
+ +
+
DIV #2
position: relative; +
+ +
+
DIV #3
position: relative; +
+ +
+
DIV #4
position: absolute; +
+ +
+
DIV #5
no positioning +
+ + ``` ### See also diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md index e6e7723afc5b8a..982850d406792a 100644 --- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md +++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md @@ -35,111 +35,106 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index ### Example source code ```html - + - - - - -

- -
-
DIV #1 -
position: absolute; -
z-index: 5; -
- -
-
DIV #2 -
position: relative; -
z-index: 3; -
- -
-
DIV #3 -
position: relative; -
z-index: 2; -
- -
-
DIV #4 -
position: absolute; -
z-index: 1; -
- -
-
DIV #5 -
no positioning -
z-index: 8; -
- - + + + + + +

+ +
+
DIV #1
position: absolute; +
z-index: 5; +
+ +
+
DIV #2
position: relative; +
z-index: 3; +
+ +
+
DIV #3
position: relative; +
z-index: 2; +
+ +
+
DIV #4
position: absolute; +
z-index: 1; +
+ +
+
DIV #5
no positioning
z-index: + 8; +
+ + ``` ### See also diff --git a/files/zh-cn/web/css/css_scrollbars_styling/index.md b/files/zh-cn/web/css/css_scrollbars_styling/index.md index 69a9c2d2220af3..31dfe963fe346f 100644 --- a/files/zh-cn/web/css/css_scrollbars_styling/index.md +++ b/files/zh-cn/web/css/css_scrollbars_styling/index.md @@ -25,11 +25,11 @@ slug: Web/CSS/CSS_scrollbars_styling ```html
-Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi -welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. -Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette -tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. -Dandelion cucumber earthnut pea peanut soko zucchini. + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens + corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts + fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber + earthnut pea peanut soko zucchini.
``` diff --git a/files/zh-cn/web/css/css_selectors/index.md b/files/zh-cn/web/css/css_selectors/index.md index b282940832a974..409d3b0a389161 100644 --- a/files/zh-cn/web/css/css_selectors/index.md +++ b/files/zh-cn/web/css/css_selectors/index.md @@ -12,6 +12,7 @@ slug: Web/CSS/CSS_selectors ## 基本选择器 - [通用选择器](/zh-CN/docs/Web/CSS/Universal_selectors) + - : 选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。 **语法：**`*` `ns|*` `*|*` @@ -19,6 +20,7 @@ slug: Web/CSS/CSS_selectors **例子：**`*` 将匹配文档的所有元素。 - [元素选择器](/zh-CN/docs/Web/CSS/Type_selectors) + - : 按照给定的节点名称，选择所有匹配的元素。 **语法：**`elementname` @@ -26,6 +28,7 @@ slug: Web/CSS/CSS_selectors **例子：**`input` 匹配任何 {{HTMLElement( "input" )}} 元素。 - [类选择器](/zh-CN/docs/Web/CSS/Class_selectors) + - : 按照给定的 `class` 属性的值，选择所有匹配的元素。 **语法：**`.classname` @@ -33,6 +36,7 @@ slug: Web/CSS/CSS_selectors **例子：**`.index` 匹配任何 `class` 属性中含有 "index" 类的元素。 - [ID 选择器](/zh-CN/docs/Web/CSS/ID_selectors) + - : 按照 `id` 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。 **语法：**`#idname` @@ -40,6 +44,7 @@ slug: Web/CSS/CSS_selectors **例子：**`#toc` 匹配 ID 为 "toc" 的元素。 - [属性选择器](/zh-CN/docs/Web/CSS/Attribute_selectors) + - : 按照给定的属性，选择所有匹配的元素。 **语法：**`[attr]` `[attr=value]` `[attr~=value]` `[attr|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]` @@ -49,6 +54,7 @@ slug: Web/CSS/CSS_selectors ## 分组选择器（Grouping selector） - [选择器列表](/zh-CN/docs/Web/CSS/Selector_list) + - : `,` 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。 **语法：**`A, B` @@ -58,6 +64,7 @@ slug: Web/CSS/CSS_selectors ## 组合器（Combinator） - [后代组合器](/zh-CN/docs/Web/CSS/Descendant_combinator) + - : “ ”（空格）组合器选择前一个元素的后代节点。 **语法：**`A B` @@ -65,6 +72,7 @@ slug: Web/CSS/CSS_selectors **例子：**`div span` 匹配所有位于任意 {{HTMLElement("div")}} 元素之内的 {{HTMLElement("span")}} 元素。 - [直接子代组合器](/zh-CN/docs/Web/CSS/Child_selectors) + - : `>` 组合器选择前一个元素的直接子代的节点。 **语法：**`A > B` @@ -72,6 +80,7 @@ slug: Web/CSS/CSS_selectors **例子：**`ul > li` 匹配直接嵌套在 {{HTMLElement("ul")}} 元素内的所有 {{HTMLElement("li")}} 元素。 - [一般兄弟组合器](/zh-CN/docs/Web/CSS/General_sibling_selectors) + - : `~` 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。 **语法：**`A ~ B` @@ -79,6 +88,7 @@ slug: Web/CSS/CSS_selectors **例子：**`p ~ span` 匹配同一父元素下，{{HTMLElement("p")}} 元素后的所有 {{HTMLElement("span")}} 元素。 - [紧邻兄弟组合器](/zh-CN/docs/Web/CSS/Adjacent_sibling_selectors) + - : `+` 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。 **语法：**`A + B` @@ -86,6 +96,7 @@ slug: Web/CSS/CSS_selectors **例子：**`h2 + p` 会匹配*紧*邻在 {{HTMLElement("Heading_Elements", "h2")}} 元素后的第一个 {{HTMLElement("p")}} 元素。 - [列组合器](/zh-CN/docs/Web/CSS/Column_combinator) {{Experimental_Inline}} + - : `||` 组合器选择属于某个表格行的节点。 **语法：**`A || B` @@ -95,11 +106,13 @@ slug: Web/CSS/CSS_selectors ## 伪选择器（Pseudo） - [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes) + - : `:` 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。 **例子：**`a:visited` 匹配所有曾被访问过的 {{HTMLElement("a")}} 元素。 - [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements) + - : `::` 伪选择器用于表示无法用 HTML 语义表达的实体。 **例子：**`p::first-line` 匹配所有 {{HTMLElement("p")}} 元素的第一行。 diff --git a/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md index 49af199ba836c9..a3b26a49fc7da3 100644 --- a/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md +++ b/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md @@ -6,11 +6,11 @@ original_slug: Web/Guide/CSS/Using_the_:target_selector {{CSSRef}} -为了辅助标识那些指向文档特定部分链接的目标，[CSS3 选择器](http://www.w3.org/TR/css3-selectors/#target-pseudo) 引入了` {{ Cssxref(":target") }} `[伪类](/zh-CN/CSS/Pseudo-classes). Netscape 7.1 已经在 Netscape 系列中加入了这个伪类的支持，这一新的举措让页面作者能够辅助用户在较大的页面中定位。 +为了辅助标识那些指向文档特定部分链接的目标，[CSS3 选择器](http://www.w3.org/TR/css3-selectors/#target-pseudo) 引入了 {{cssxref(":target")}} [伪类](/zh-CN/CSS/Pseudo-classes). Netscape 7.1 已经在 Netscape 系列中加入了这个伪类的支持，这一新的举措让页面作者能够辅助用户在较大的页面中定位。 ### 选择一个目标 -`{{ Cssxref(":target") }} 伪类用来指定那些包含片段标识符的 URI 的目标元素样式。` 例如，`http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example` 这个 URI 包含了 `#Example 片段标识符。` 在 HTML 中，标识符是元素的 id 或者 name 属性，。由于这两者位于相同的命名空间，因此，这个示例 URI 指向的是文档顶层的 "Example" 。 +{{cssxref(":target")}} 伪类用来指定那些包含片段标识符的 URI 的目标元素样式。例如 `https://developer.mozilla.org/zh-CN/docs/Web/CSS#参考` 这个 URI 包含了 `#参考` 片段标识符 在 HTML 中，标识符是元素的 `id` 或者 `name` 属性。由于这两者位于相同的命名空间，因此，这个示例 URI 指向的是文档顶层的“参考”。 假设你想修改 URI 指向的任何 h2 元素，但是又不想把样式应用到任何其他同类型的元素，那么以下示例足够简单有用： @@ -34,7 +34,7 @@ h2:target {font-weight: bold;} ### 示例 -在以下示例中，5 个链接指向了同一文档中的元素。例如，选择 "First" 链接会导致`

`成为目标元素。注意，由于目标元素有可能会被放置到浏览器窗口的顶层，因此文档可能会跳到新的滚动位置。 +在以下示例中，5 个链接指向了同一文档中的元素。例如，选择 "First" 链接会导致 `

` 成为目标元素。注意，由于目标元素有可能会被放置到浏览器窗口的顶层，因此文档可能会跳到新的滚动位置。 ```

...

...

diff --git a/files/zh-cn/web/css/css_transitions/using_css_transitions/index.md b/files/zh-cn/web/css/css_transitions/using_css_transitions/index.md index a79142bb4e9286..6bbb16a30317b5 100644 --- a/files/zh-cn/web/css/css_transitions/using_css_transitions/index.md +++ b/files/zh-cn/web/css/css_transitions/using_css_transitions/index.md @@ -11,7 +11,7 @@ slug: Web/CSS/CSS_transitions/Using_CSS_transitions ![CSS 过渡告诉浏览器绘制初始和最终状态之间的中间状态，向用户展示一个平滑的过渡](transitionsprinciple.png) -CSS 过渡可以决定哪些属性发生动画效果（通过[*明确地列出这些属性*](/zh-CN/docs/Web/CSS/transition-property)），何时开始（通过设置[*延时*](/zh-CN/docs/Web/CSS/transition-delay)），持续多久（通过设置[*时长*](/zh-CN/docs/Web/CSS/transition-duration)）以及如何动画（通过定义[*缓动函数*](/zh-CN/docs/Web/CSS/transition-timing-function)，比如线性或先快后慢）。 +CSS 过渡可以决定哪些属性发生动画效果（通过[_明确地列出这些属性_](/zh-CN/docs/Web/CSS/transition-property)），何时开始（通过设置[_延时_](/zh-CN/docs/Web/CSS/transition-delay)），持续多久（通过设置[_时长_](/zh-CN/docs/Web/CSS/transition-duration)）以及如何动画（通过定义[_缓动函数_](/zh-CN/docs/Web/CSS/transition-timing-function)，比如线性或先快后慢）。 ## 哪些 CSS 属性可用于过渡？ @@ -66,7 +66,8 @@ div { ```html hidden

- 下面的盒子包含 width、height、background-color 和 rotate 的过渡效果。鼠标停留在盒子上以观察这些属性是如何变化的。 + 下面的盒子包含 width、height、background-color 和 rotate + 的过渡效果。鼠标停留在盒子上以观察这些属性是如何变化的。

示例
@@ -82,7 +83,11 @@ div { width: 100px; height: 100px; background-color: #0000ff; - transition: width 2s, height 2s, background-color 2s, rotate 2s; + transition: + width 2s, + height 2s, + background-color 2s, + rotate 2s; } .box:hover { @@ -210,7 +215,7 @@ document.addEventListener( f.style.transform = `translateY(${ev.clientY - 25}px)`; f.style.transform += `translateX(${ev.clientX - 25}px)`; }, - false + false, ); ``` diff --git a/files/zh-cn/web/css/css_values_and_units/index.md b/files/zh-cn/web/css/css_values_and_units/index.md index 60d39894d07bf1..a452f0e8a62483 100644 --- a/files/zh-cn/web/css/css_values_and_units/index.md +++ b/files/zh-cn/web/css/css_values_and_units/index.md @@ -41,7 +41,7 @@ slug: Web/CSS/CSS_Values_and_Units ```css .item::after { - content: "This is my content."; + content: "This is my content."; } ``` @@ -61,7 +61,7 @@ left | right | none | inline-start | inline-end ```css .box { - float: left; + float: left; } ``` diff --git a/files/zh-cn/web/css/cursor/index.md b/files/zh-cn/web/css/cursor/index.md index 14f96d008bf560..403311433166c0 100644 --- a/files/zh-cn/web/css/cursor/index.md +++ b/files/zh-cn/web/css/cursor/index.md @@ -20,8 +20,12 @@ cursor: auto; cursor: url(hand.cur), pointer; /* URL 和 xy 的坐标偏移值，最后提供一个关键字值作为备用 */ -cursor: url(cursor1.png) 4 12, auto; -cursor: url(cursor2.png) 2 2, pointer; +cursor: + url(cursor1.png) 4 12, + auto; +cursor: + url(cursor2.png) 2 2, + pointer; /* 全局属性 */ cursor: inherit; @@ -36,7 +40,10 @@ cursor 属性为零个或多个[\](/zh-CN/docs/Web/CSS/cursor#%3Curl%3E)值 例如，下面的例子使用\值指定两个图像，为第二个图像提供\\坐标，如果两个图像都无法加载，则返回`progress`关键字值： ```css -cursor: url(one.svg), url(two.svg) 5 5, progress; +cursor: + url(one.svg), + url(two.svg) 5 5, + progress; ``` ### 值 diff --git a/files/zh-cn/web/css/direction/index.md b/files/zh-cn/web/css/direction/index.md index 2141754a50ef0c..8921176acc4f59 100644 --- a/files/zh-cn/web/css/direction/index.md +++ b/files/zh-cn/web/css/direction/index.md @@ -64,11 +64,11 @@ blockquote { ```html
-

这个段落用中文书写的，但是方向是从右到左，是错误的。

+

这个段落用中文书写的，但是方向是从右到左，是错误的。

-

هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.

+

هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.

``` diff --git a/files/zh-cn/web/css/display-box/index.md b/files/zh-cn/web/css/display-box/index.md index 5d80b80d57caa7..4606f19da482e7 100644 --- a/files/zh-cn/web/css/display-box/index.md +++ b/files/zh-cn/web/css/display-box/index.md @@ -12,10 +12,13 @@ slug: Web/CSS/display-box 有效的 `` 值： - `contents` {{Experimental_Inline}} + - : 这些元素自己不显示。它们被它们的伪盒（pseudo-box）和子项盒（child boxes）取代。请注意 CSS 层次 3 显示规格定义的 `contents` 值应该怎样影响"非常见元素" - 即不由 CSS 渲染的元素（诸如被取代元素）。参考 [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) 以获取细节。 由于浏览器中有个 bug，它会从访问树（accessibility tree）删除元素，屏幕阅读者会看不到里面内容。参考下方访问性关注 [Accessibility concerns](#accessibility_concerns) 章节以获取细节。 + - `none` + - : 关闭元素的显示，不影响布局（文件中没有该元素）。所有子项的显示也被关闭。 要一个元素占据空间（文件中存在），但不渲染，请使用 {{CSSxRef("visibility")}} 属性。 diff --git a/files/zh-cn/web/css/display-outside/index.md b/files/zh-cn/web/css/display-outside/index.md index 719b1db8f80cc9..7b35534572a980 100644 --- a/files/zh-cn/web/css/display-outside/index.md +++ b/files/zh-cn/web/css/display-outside/index.md @@ -25,16 +25,15 @@ slug: Web/CSS/display-outside ### HTML ```html -片段 1 -片段 2 +片段 1 片段 2 ``` ### CSS ```css span { - display: block; - border: 1px solid rebeccapurple; + display: block; + border: 1px solid rebeccapurple; } ``` diff --git a/files/zh-cn/web/css/display/index.md b/files/zh-cn/web/css/display/index.md index ac508f9f83285a..c4056b20051b43 100644 --- a/files/zh-cn/web/css/display/index.md +++ b/files/zh-cn/web/css/display/index.md @@ -361,8 +361,8 @@ div { #### JavaScript ```js -const articles = document.querySelectorAll('.container'); -const select = document.querySelector('select'); +const articles = document.querySelectorAll(".container"); +const select = document.querySelector("select"); function updateDisplay() { articles.forEach((article) => { @@ -370,7 +370,7 @@ function updateDisplay() { }); } -select.addEventListener('change', updateDisplay); +select.addEventListener("change", updateDisplay); updateDisplay(); ``` diff --git a/files/zh-cn/web/css/empty-cells/index.md b/files/zh-cn/web/css/empty-cells/index.md index 81b40508c683df..6e15b8df84d6f1 100644 --- a/files/zh-cn/web/css/empty-cells/index.md +++ b/files/zh-cn/web/css/empty-cells/index.md @@ -52,7 +52,7 @@ empty-cells: unset; -
+
diff --git a/files/zh-cn/web/css/env/index.md b/files/zh-cn/web/css/env/index.md index 46b1f128279f28..29ac4f31c0984c 100644 --- a/files/zh-cn/web/css/env/index.md +++ b/files/zh-cn/web/css/env/index.md @@ -9,16 +9,15 @@ original_slug: Web/CSS/env() **`env()`** [CSS](/zh-CN/docs/Web/CSS) 函数以类似于 {{cssxref("var")}} 函数和 [custom properties](/zh-CN/docs/Web/CSS/--*) 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。为了告诉浏览器使用屏幕上所有的可用空间，并以此使用`env()`变量，我们需要添加一个新的视口元值： ```html - + ``` ```css body { - padding: - env(safe-area-inset-top, 20px) - env(safe-area-inset-right, 20px) - env(safe-area-inset-bottom, 20px) - env(safe-area-inset-left, 20px); + padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env( + safe-area-inset-bottom, + 20px + ) env(safe-area-inset-left, 20px); } ``` @@ -59,11 +58,10 @@ env(safe-area-inset-left, 1.4rem); ```html

- If the env() function is supported in your browser, - this paragraph's text will have 50px of padding between it and - the left border — but not the top, right and bottom. - This is because the accompanying CSS is the equivalent of - padding: 0 0 0 50px, because, unlike other CSS + If the env() function is supported in your browser, this + paragraph's text will have 50px of padding between it and the left border — + but not the top, right and bottom. This is because the accompanying CSS is the + equivalent of padding: 0 0 0 50px, because, unlike other CSS properties, user agent property names are case-sensitive.

``` @@ -72,11 +70,10 @@ env(safe-area-inset-left, 1.4rem); p { width: 300px; border: 2px solid red; - padding: - env(safe-area-inset-top, 50px) - env(safe-area-inset-right, 50px) - env(safe-area-inset-bottom, 50px) - env(SAFE-AREA-INSET-LEFT, 50px); + padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env( + safe-area-inset-bottom, + 50px + ) env(SAFE-AREA-INSET-LEFT, 50px); } ``` @@ -85,10 +82,23 @@ p { ### Example values ```css -padding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */ -padding: env(Safe-area-inset-bottom, 50px); /* 50px because UA properties are case sensitive */ -padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */ -padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */ +padding: env( + safe-area-inset-bottom, + 50px +); /* zero for all rectangular user agents */ +padding: env( + Safe-area-inset-bottom, + 50px +); /* 50px because UA properties are case sensitive */ +padding: env( + x, + 50px 20px +); /* as if padding: '50px 20px' were set because x is not a valid environment variable */ +padding: env( + x, + 50px, + 20px +); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */ ``` 向下兼容的语法和自定义属性一样，允许使用逗号。但是如果属性值不支持逗号，则该值无效。 diff --git a/files/zh-cn/web/css/fit-content_function/index.md b/files/zh-cn/web/css/fit-content_function/index.md index 60f35c7be6cb45..ee1cf62b71749b 100644 --- a/files/zh-cn/web/css/fit-content_function/index.md +++ b/files/zh-cn/web/css/fit-content_function/index.md @@ -66,8 +66,8 @@ The `fit-content()` function accepts a `` or a `` as an argu
Item as wide as the content.
- Item with more text in it. Because the contents of it are - wider than the maximum width, it is clamped at 300 pixels. + Item with more text in it. Because the contents of it are wider than the + maximum width, it is clamped at 300 pixels.
Flexible item
diff --git a/files/zh-cn/web/css/flex-basis/index.md b/files/zh-cn/web/css/flex-basis/index.md index c98adee62a4dae..8c4ae76ed16418 100644 --- a/files/zh-cn/web/css/flex-basis/index.md +++ b/files/zh-cn/web/css/flex-basis/index.md @@ -41,6 +41,7 @@ flex-basis: unset; - `<'width'>` - : width 值可以是 {{cssxref("<length>")}}; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的{{cssxref("<percentage>", "百分数")}} 。负值是不被允许的。默认为 `auto`。 - `content` + - : 基于 flex 的元素的内容自动调整大小。 > **备注：**由于最初规范中没有包括这个值，在一些早期的浏览器实现的 flex 布局中，content 值无效，可以利用设置 ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) 或 [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) 为 auto 达到同样的效果。 @@ -86,10 +87,10 @@ flex-basis: unset; } .flex { - background: #6AB6D8; + background: #6ab6d8; padding: 10px; margin-bottom: 50px; - border: 3px solid #2E86BB; + border: 3px solid #2e86bb; color: white; font-size: 20px; text-align: center; @@ -112,7 +113,7 @@ flex-basis: unset; } .flex1:after { - content: 'auto'; + content: "auto"; } .flex2 { @@ -120,7 +121,7 @@ flex-basis: unset; } .flex2:after { - content: 'max-content'; + content: "max-content"; } .flex3 { @@ -128,7 +129,7 @@ flex-basis: unset; } .flex3:after { - content: 'min-content'; + content: "min-content"; } .flex4 { @@ -136,15 +137,15 @@ flex-basis: unset; } .flex4:after { - content: 'fit-content'; + content: "fit-content"; } .flex5 { - flex-basis: content; + flex-basis: content; } .flex5:after { - content: 'content'; + content: "content"; } .flex6 { @@ -152,7 +153,7 @@ flex-basis: unset; } .flex6:after { - content: 'fill/-webkit-fill-available/-moz-available'; + content: "fill/-webkit-fill-available/-moz-available"; } ``` diff --git a/files/zh-cn/web/css/flex-direction/index.md b/files/zh-cn/web/css/flex-direction/index.md index 6e4547d4fd2226..80ff8c7f546cf0 100644 --- a/files/zh-cn/web/css/flex-direction/index.md +++ b/files/zh-cn/web/css/flex-direction/index.md @@ -58,15 +58,15 @@ flex-direction: unset; ```html

This is a Column-Reverse

-
A
-
B
-
C
+
A
+
B
+
C

This is a Row-Reverse

-
A
-
B
-
C
+
A
+
B
+
C
``` diff --git a/files/zh-cn/web/css/flex-grow/index.md b/files/zh-cn/web/css/flex-grow/index.md index baa6b6cce8d116..52cce5dd202388 100644 --- a/files/zh-cn/web/css/flex-grow/index.md +++ b/files/zh-cn/web/css/flex-grow/index.md @@ -39,7 +39,7 @@ flex-grow: unset; 剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。 - `flex-grow` 与其他的 flex 属性{{cssxref("flex-shrink")}}和{{cssxref("flex-basis")}}一起使用，通常使用{{cssxref("flex")}} 速记来定义，以确保所有的值都被设置。

+`flex-grow` 与其他的 flex 属性{{cssxref("flex-shrink")}}和{{cssxref("flex-basis")}}一起使用，通常使用{{cssxref("flex")}} 速记来定义，以确保所有的值都被设置。

## 正式定义 @@ -81,12 +81,12 @@ flex-grow: unset; .box { flex-grow: 1; - border: 3px solid rgba(0,0,0,.2); + border: 3px solid rgba(0, 0, 0, 0.2); } .box1 { flex-grow: 2; - border: 3px solid rgba(0,0,0,.2); + border: 3px solid rgba(0, 0, 0, 0.2); } ``` diff --git a/files/zh-cn/web/css/flex-shrink/index.md b/files/zh-cn/web/css/flex-shrink/index.md index ebbd065db69cd9..21189e022c90fc 100644 --- a/files/zh-cn/web/css/flex-shrink/index.md +++ b/files/zh-cn/web/css/flex-shrink/index.md @@ -14,7 +14,7 @@ flex-shrink: 0.6; /* Global values */ flex-shrink: inherit; flex-shrink: initial; -flex-shrink: unset +flex-shrink: unset; ``` {{cssinfo}} @@ -61,7 +61,7 @@ flex-shrink: unset #content div { flex-basis: 120px; - border: 3px solid rgba(0,0,0,.2); + border: 3px solid rgba(0, 0, 0, 0.2); } .box { diff --git a/files/zh-cn/web/css/flex/index.md b/files/zh-cn/web/css/flex/index.md index 8fdb9ced192fbc..73cedd16fcc5d9 100644 --- a/files/zh-cn/web/css/flex/index.md +++ b/files/zh-cn/web/css/flex/index.md @@ -124,7 +124,7 @@ flex: unset; } .flex-container { - background-color: #F4F7F8; + background-color: #f4f7f8; resize: horizontal; overflow: hidden; display: flex; @@ -136,7 +136,7 @@ flex: unset; padding: 0.5em; width: 110px; min-width: 0; - background-color: #1B5385; + background-color: #1b5385; color: white; font-family: monospace; font-size: 13px; @@ -212,7 +212,7 @@ flex: unset; ```js hidden var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); -flex.addEventListener("click", function() { +flex.addEventListener("click", function () { raw.style.display = raw.style.display == "none" ? "block" : "none"; }); ``` diff --git a/files/zh-cn/web/css/float/index.md b/files/zh-cn/web/css/float/index.md index b9f7606b93208b..49c2ca610e1cfe 100644 --- a/files/zh-cn/web/css/float/index.md +++ b/files/zh-cn/web/css/float/index.md @@ -14,22 +14,22 @@ original_slug: CSS/float 由于 `float` 意味着使用块布局，它在某些情况下会修改 {{cssxref("display")}} 值的计算值： -| 指定值 | 计算值 | -| -------------------- | -------------- | -| `inline` | `block` | -| `inline-block` | `block` | -| `inline-table` | `table` | -| `table-row` | `block` | -| `table-row-group` | `block` | -| `table-column` | `block` | -| `table-column-group` | `block` | -| `table-cell` | `block` | -| `table-caption` | `block` | -| `table-header-group` | `block` | -| `table-footer-group` | `block` | -| `inline-flex` | `flex` | -| `inline-grid` | `grid` | -| _other_ | _unchanged_ | +| 指定值 | 计算值 | +| -------------------- | ----------- | +| `inline` | `block` | +| `inline-block` | `block` | +| `inline-table` | `table` | +| `table-row` | `block` | +| `table-row-group` | `block` | +| `table-column` | `block` | +| `table-column-group` | `block` | +| `table-cell` | `block` | +| `table-caption` | `block` | +| `table-header-group` | `block` | +| `table-footer-group` | `block` | +| `inline-flex` | `flex` | +| `inline-grid` | `grid` | +| _other_ | _unchanged_ | > **备注：** 如果要在 JavaScript 中把 `float` 属性当作 {{domxref("HTMLElement.style")}} 对象的一个成员来操作，那么在旧版本的浏览器中，你必须拼写成 `cssFloat`。另外还要注意到在 Internet Explorer 8 和更老的 IE 当中，要使用 `styleFloat` 属性。这是 DOM 驼峰命名和 CSS 所用的连字符分隔命名法对应关系中的一个特例（这是因为在 JavaScript 中“float”是一个保留字，因为同样的原因，“class”被改成了“className” 、`
Moe