zh-cn: Format /web/css using Prettier (part 3) (#14661)

Co-authored-by: A1lo <[email protected]>
mdn · Jul 29, 2023 · 623c5ce · 623c5ce
1 parent 92e2223
commit 623c5ce
Show file tree

Hide file tree

Showing 100 changed files with 1,573 additions and 1,159 deletions.
diff --git a/...h-cn/web/css/css_logical_properties_and_values/margins_borders_padding/index.md b/...h-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
@@ -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
@@ -24,21 +24,20 @@ slug: Web/CSS/CSS_multicol_layout/Using_multicol_layouts
 ```html
 <div id="col">
   <p>
-    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.
   </p>
   <p>
-    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.
   </p>
   <p>
-    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.
   </p>
   <p>
-    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.
   </p>
 </div>
 ```
@@ -65,14 +64,12 @@ slug: Web/CSS/CSS_multicol_layout/Using_multicol_layouts
 
 ```html
 <div id="wid">
-  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
 </div>
 ```
 
@@ -104,14 +101,12 @@ CSS 声明 `column-width: 12em` 可替换成 `columns: 12em`。
 
 ```html
 <div id="col_short">
-  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
 </div>
 ```
 
@@ -133,14 +128,12 @@ CSS 声明 `column-count: 4` 可替换成 `columns: 4`。
 
 ```html
 <div id="columns_4">
-  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
 </div>
 ```
 
@@ -164,14 +157,12 @@ CSS 声明 `column-width: 8em` 和 `column-count: 12` 可替换成 `columns: 12
 
 ```html
 <div id="columns_12">
-  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
 </div>
 ```
 
@@ -203,14 +194,12 @@ CSS3 多列规范需要列高平衡：即，浏览器自动设置最大列高，
 
 ```html
 <div id="column_gap">
-  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
 </div>
 ```
 

diff --git a/...n/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/...n/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/...css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md b/...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;
 }
 ```