mdn · yin1999 · May 31, 2022 · May 31, 2022 · May 31, 2022
@@ -7,7 +7,7 @@
 
 <h2 id="概述">概述</h2>
 
-<p>一个CSS属性的<strong>实际值（actual value）</strong>是应用值（used value）被应用后的近似值。例如，一个用户代理可能只能渲染一个整数像素值的边框（实际值），并且该值可能被强制近似于边框的计算宽度值。</p>
+<p>一个 CSS 属性的<strong>实际值（actual value）</strong>是应用值（used value）被应用后的近似值。例如，一个用户代理可能只能渲染一个整数像素值的边框（实际值），并且该值可能被强制近似于边框的计算宽度值。</p>
 
 <h2 id="规范">规范</h2>
 

@@ -20,12 +20,12 @@
 <h2 id="语法">语法</h2>
 
 <pre class="brush: css">/* 基本位置对齐 */
-/*align-content不采用左右值 */
+/*align-content 不采用左右值 */
 align-content: center;     /* 将项目放置在中点 */
 align-content: start;      /* 最先放置项目 */
 align-content: end;        /* 最后放置项目 */
-align-content: flex-start; /* 从起始点开始放置flex元素 */
-align-content: flex-end;   /* 从终止点开始放置flex元素 */
+align-content: flex-start; /* 从起始点开始放置 flex 元素 */
+align-content: flex-end;   /* 从终止点开始放置 flex 元素 */
 
 <code>/* 默认对齐 */
 </code>align-content<code>: normal</code><code>;</code>
@@ -44,7 +44,7 @@ <h2 id="语法">语法</h2>
 align-content: space-evenly;  /* 均匀分布项目
                                  项目周围有相等的空间 */
 align-content: stretch;       /* 均匀分布项目
-                                 拉伸‘自动’-大小的项目以充满容器 */
+                                 拉伸‘自动’ - 大小的项目以充满容器 */
 
 /* 溢出对齐 */
 align-content: safe center;
@@ -256,7 +256,7 @@ <h2 id="规范">规范</h2>
   <tr>
    <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td>
    <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td>添加了 <code>space-evenly</code>, <code>[ first | last ]? baseline</code>, <code>start</code>, <code>end</code>, <code>left</code>, 和 <code>right</code> 的属性值.</td>
+   <td>添加了 <code>space-evenly</code>, <code>[ first | last ]? baseline</code>, <code>start</code>, <code>end</code>, <code>left</code>, 和 <code>right</code> 的属性值。</td>
   </tr>
   <tr>
    <td>{{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}</td>
@@ -283,9 +283,9 @@ <h3 id="在网格布局中的兼容性">在网格布局中的兼容性</h3>
 <h2 id="相关链接">相关链接</h2>
 
 <ul>
- <li>弹性盒子布局的基本概念: <em><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
- <li>对齐弹性容器中的弹性项目: <em><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
- <li>网格布局中的盒模型对齐: <em><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li>
+ <li>弹性盒子布局的基本概念：<em><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>对齐弹性容器中的弹性项目：<em><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>网格布局中的盒模型对齐：<em><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li>
  <li><a href="/zh-CN/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li>
 </ul>
 

@@ -12,13 +12,13 @@
 
 
 
-<p>CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。</p>
+<p>CSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。</p>
 
 <div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div>
 
 
 
-<p>目前，Flexbox和CSS网格布局支持此属性。在Flexbox中，它控制十字轴上项目的对齐方式，在网格布局中，它控制块轴上项目的对齐方式。</p>
+<p>目前，Flexbox 和 CSS 网格布局支持此属性。在 Flexbox 中，它控制十字轴上项目的对齐方式，在网格布局中，它控制块轴上项目的对齐方式。</p>
 
 <h2 id="语法">语法</h2>
 
@@ -282,5 +282,5 @@ <h3 id="在网格布局中的兼容性">在网格布局中的兼容性</h3>
 <h2 id="相关链接">相关链接</h2>
 
 <ul>
- <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">使用CSS弹性框</a></li>
+ <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">使用 CSS 弹性框</a></li>
 </ul>
@@ -17,7 +17,7 @@
 
 
 
-<p>align-self属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略 <code>align-self</code>。</p>
+<p>align-self 属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略 <code>align-self</code>。</p>
 
 <h2 id="语法">语法</h2>
 
@@ -59,12 +59,12 @@ <h3 id="值">值</h3>
 </dl>
 
 <dl>
- <dd>效果取决于当前的布局模式:</dd>
+ <dd>效果取决于当前的布局模式：</dd>
  <dd>
  <ul>
-  <li>绝对定位布局中，normal在绝对定位的替代元素上表现为<code>start</code>，在<em>所有其他</em>绝对定位元素上表现为<code>stretch</code>。</li>
+  <li>绝对定位布局中，normal 在绝对定位的替代元素上表现为<code>start</code>，在<em>所有其他</em>绝对定位元素上表现为<code>stretch</code>。</li>
   <li>在绝对定位的静态元素上表现为<code>stretch</code>。</li>
-  <li>flex布局中表现为stretch。</li>
+  <li>flex 布局中表现为 stretch。</li>
   <li>For grid items, this keyword leads to a behavior similar to the one of <code>stretch</code>, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like <code>start</code>.</li>
   <li>在块级和表格单元中无效。</li>
  </ul>

@@ -24,7 +24,7 @@ <h2 id="语法">语法</h2>
 all: revert;
 </pre>
 
-<p><code>all</code> 属性被作为 CSS 全局关键词的其中之一. 不过需要注意的是，{{cssxref("unicode-bidi")}} 与 {{cssxref("direction")}} 这两个属性是不受 <code>all</code> 影响的</p>
+<p><code>all</code> 属性被作为 CSS 全局关键词的其中之一。不过需要注意的是，{{cssxref("unicode-bidi")}} 与 {{cssxref("direction")}} 这两个属性是不受 <code>all</code> 影响的</p>
 
 <h3 id="取值">取值</h3>
 
@@ -103,7 +103,7 @@ <h4 id="allunset"><code>all:unset</code></h4>
 </pre>
 {{EmbedLiveSample("ex1", "200", "125")}}
 
-<p>{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 inline 元素(初始值)，其 {{cssxref("background-color")}} 为 <code>transparent</code> (初始值)，但其 {{cssxref("font-size")}} 仍为 <code>small</code> (继承值) ，其 {{cssxref("color")}} 为 <code>blue</code> (继承值)。</p>
+<p>{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 inline 元素 (初始值)，其 {{cssxref("background-color")}} 为 <code>transparent</code> (初始值)，但其 {{cssxref("font-size")}} 仍为 <code>small</code> (继承值) ，其 {{cssxref("color")}} 为 <code>blue</code> (继承值)。</p>
 </div>
 
 <div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
@@ -118,7 +118,7 @@ <h4 id="allinitial"><code>all:initial</code></h4>
 </pre>
 {{EmbedLiveSample("ex2", "200", "125")}}
 
-<p>{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 inline 元素(初始值)，其 {{cssxref("background-color")}} 为 <code>transparent</code> (初始值)，其 {{cssxref("font-size")}} 为 <code>normal</code> (初始值)，其 {{cssxref("color")}} 为 <code>black</code>(初始值)。</p>
+<p>{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 inline 元素 (初始值)，其 {{cssxref("background-color")}} 为 <code>transparent</code> (初始值)，其 {{cssxref("font-size")}} 为 <code>normal</code> (初始值)，其 {{cssxref("color")}} 为 <code>black</code>(初始值)。</p>
 </div>
 
 <div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">

@@ -11,9 +11,9 @@
 
 <p>Firefox lets the user select the stylesheet using the <em>View &gt; Page Style</em> submenu. Internet Explorer also supports this feature (beginning with IE 8), also accessed from <em>View &gt; Page Style</em>. Chrome requires an extension to use the feature (as of version 48). The web page can also provide its own user interface to let the user switch styles.</p>
 
-<p>Firefox允许用户通过菜单栏中 查看 &gt; 页面样式 选择样式表。Internet Explorer也支持这一功能（从IE8开始）（菜单栏 查看 &gt; 页面样式）。网页也可提供自己的用户界面让用户</p>
+<p>Firefox 允许用户通过菜单栏中 查看 &gt; 页面样式 选择样式表。Internet Explorer 也支持这一功能（从 IE8 开始）（菜单栏 查看 &gt; 页面样式）。网页也可提供自己的用户界面让用户</p>
 
-<p>在Firefox和Internet Explorer（从IE8（6？）开始）中，用户可以通过菜单栏中的 查看 &gt; 页面样式 来选择网页的样式。网页也可以提供选择样式的界面。</p>
+<p>在 Firefox 和 Internet Explorer（从 IE8（6？）开始）中，用户可以通过菜单栏中的 查看 &gt; 页面样式 来选择网页的样式。网页也可以提供选择样式的界面。</p>
 
 <h2 id="An_example_specifying_the_alternative_stylesheets">An example: specifying the alternative stylesheets</h2>
 
@@ -36,7 +36,7 @@ <h2 id="示例：提供可替代样式表">示例：提供可替代样式表</h2
 
 <p>No matter what style is selected, the rules from the reset.css stylesheet will always be applied.</p>
 
-<p>无论用户选择何种样式， reset.css 总会被应用。</p>
+<p>无论用户选择何种样式，reset.css 总会被应用。</p>
 
 <h3 id="尝试">尝试</h3>
 

@@ -9,15 +9,15 @@
 
 <div>{{CSSRef}}</div>
 
-<p><a href="/en-US/docs/Web/CSS">CSS数据类型</a> <strong><code>&lt;angle-percentage&gt;</code></strong><a href="/en-US/docs/Web/CSS"> </a>代表了一种既可以是 {{Cssxref("angle")}} ，也可以是{{Cssxref("percentage")}}的数据类型</p>
+<p><a href="/en-US/docs/Web/CSS">CSS 数据类型</a> <strong><code>&lt;angle-percentage&gt;</code></strong><a href="/en-US/docs/Web/CSS"> </a>代表了一种既可以是 {{Cssxref("angle")}} ，也可以是{{Cssxref("percentage")}}的数据类型</p>
 
 <p> </p>
 
 <h2 id="语法">语法</h2>
 
 <p>有关此类型的详细文档，请参阅 {{Cssxref("angle")}} 和 {{Cssxref("percentage")}} </p>
 
-<h2 id="在calc()中使用这个类型">在calc()中使用这个类型</h2>
+<h2 id="在calc()中使用这个类型">在 calc() 中使用这个类型</h2>
 
 <p>当 <code>&lt;angle-percentage&gt;</code> 被正确定义后，它就代表了一个可以被 {{Cssxref("calc()")}} 表达式解析的角度 </p>
 

@@ -9,7 +9,7 @@
 
 <h2 id="语法">语法</h2>
 
-<p><code>&lt;angle&gt;</code> 数据类型由 {{cssxref("&lt;number&gt;")}} 和下列单位组成。数字与单位之间没有空格。数字为0时，单位可以省略。</p>
+<p><code>&lt;angle&gt;</code> 数据类型由 {{cssxref("&lt;number&gt;")}} 和下列单位组成。数字与单位之间没有空格。数字为 0 时，单位可以省略。</p>
 
 <p><code>&lt;angle&gt;</code> 可以使用 <code>+</code> 或 <code>-</code> 开头。正数表示顺时针的角，负数表示逆时针的角。对于静态的角，同样的角度可以使用任意等效的值表示。比如 <code>90deg</code> 等于 <code>-270deg</code>，<code>1turn</code> 等于 <code>4turn</code>。而对于动态的角，比如应用了 {{cssxref("animation")}} 或 {{cssxref("transition")}} 时，显示效果则不一样。</p>
 

@@ -17,7 +17,7 @@ <h2 id="概述">概述</h2>
 
 <p><code>0s</code>是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；</p>
 
-<p>定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。</p>
+<p>定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为 -1s，动画会从它的动画序列的第 1 秒位置处立即开始。</p>
 
 <p>如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。</p>
 
@@ -35,7 +35,7 @@ <h3 id="值">值</h3>
 
 <dl>
  <dt><code>&lt;time&gt;</code></dt>
- <dd>从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效。</dd>
+ <dd>从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒 (s) 和毫秒 (ms)。如果未设置单位，定义无效。</dd>
 </dl>
 
 <h3 id="正式语法">正式语法</h3>

@@ -42,8 +42,8 @@ <h3 id="值">值</h3>
  <dt><code>reverse</code></dt>
  <dd>反向运行动画，每周期结束动画由尾到头运行。</dd>
  <dt><code>alternate-reverse</code></dt>
- <dd>反向交替， 反向开始交替</dd>
- <dd>动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。</dd>
+ <dd>反向交替，反向开始交替</dd>
+ <dd>动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从 1 开始。</dd>
 </dl>
 
 <h2 id="例子">例子</h2>

@@ -15,7 +15,7 @@ <h2 id="概述">概述</h2>
 
 <p><code>animation-duration</code>属性指定一个动画周期的时长。</p>
 
-<p>默认值为0s，表示无动画。</p>
+<p>默认值为 0s，表示无动画。</p>
 
 <p>使用简写属性{{cssxref("animation")}}很方便地同时设置所有的动画属性。</p>
 
@@ -36,10 +36,12 @@ <h3 id="值">值</h3>
 
 <dl>
  <dt><code>&lt;time&gt;</code></dt>
- <dd>一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。</dd>
+ <dd>一个动画周期的时长，单位为秒 (s) 或者毫秒 (ms)，无单位值无效。</dd>
 </dl>
 
-<div class="note"><strong>注意：</strong>负值无效，浏览器会忽略该声明，但是一些早期的带前缀的声明会将负值当作0s。</div>
+<div class="note">
+ <p><strong>备注：</strong>负值无效，浏览器会忽略该声明，但是一些早期的带前缀的声明会将负值当作 0s。</p>
+</div>
 
 <h2 id="示例">示例</h2>
 

@@ -11,7 +11,7 @@
 ---
 <div>{{CSSRef}}</div>
 
-<p><a href="/en/CSS">CSS</a> 属性 <strong><code>animation-fill-mode</code></strong> 设置CSS动画在执行之前和之后如何将样式应用于其目标。</p>
+<p><a href="/en/CSS">CSS</a> 属性 <strong><code>animation-fill-mode</code></strong> 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。</p>
 
 <div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div>
 
@@ -38,7 +38,7 @@ <h3 id="值">值</h3>
  <dt><code>none</code></dt>
  <dd>当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。</dd>
  <dt><code>forwards</code></dt>
- <dd>目标将保留由执行期间遇到的最后一个<a href="/en-US/docs/CSS/@keyframes">关键帧</a>计算值。 最后一个关键帧取决于{{cssxref("animation-direction")}}和{{cssxref("animation-iteration-count")}}的值：
+ <dd>目标将保留由执行期间遇到的最后一个<a href="/en-US/docs/CSS/@keyframes">关键帧</a>计算值。最后一个关键帧取决于{{cssxref("animation-direction")}}和{{cssxref("animation-iteration-count")}}的值：
  <table class="standard-table">
   <thead>
    <tr>
@@ -82,7 +82,7 @@ <h3 id="值">值</h3>
  </table>
  </dd>
  <dt><code>backwards</code></dt>
- <dd>动画将在应用于目标时立即应用第一个关键帧中定义的值，并在{{cssxref("animation-delay")}}期间保留此值。 第一个关键帧取决于{{cssxref("animation-direction")}}的值：
+ <dd>动画将在应用于目标时立即应用第一个关键帧中定义的值，并在{{cssxref("animation-delay")}}期间保留此值。第一个关键帧取决于{{cssxref("animation-direction")}}的值：
  <table class="standard-table">
   <thead>
    <tr>
@@ -107,7 +107,7 @@ <h3 id="值">值</h3>
 </dl>
 
 <div class="note">
-<p><strong>注意</strong>：当您在<code>animation-*</code>属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。 有关更多信息，请参阅<a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">设置多个动画属性值</a>。</p>
+<p><strong>注意</strong>：当您在<code>animation-*</code>属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。有关更多信息，请参阅<a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">设置多个动画属性值</a>。</p>
 </div>
 
 <h3 id="正式语法">正式语法</h3>
@@ -116,7 +116,7 @@ <h3 id="正式语法">正式语法</h3>
 
 <h2 id="Example" name="Example">示例</h2>
 
-<p>您可以在以下示例中看到 <code>animation-fill-mode</code> 的效果。 它演示了如何对于运行无限时间的动画，可以使其保持最终状态而不是恢复到原始状态（这是默认状态）。</p>
+<p>您可以在以下示例中看到 <code>animation-fill-mode</code> 的效果。它演示了如何对于运行无限时间的动画，可以使其保持最终状态而不是恢复到原始状态（这是默认状态）。</p>
 
 <h3 id="HTML">HTML</h3>
 

@@ -7,7 +7,7 @@
 
 <h2 id="Summary_概要">Summary 概要</h2>
 
-<p><strong><code>animation-iteration-count</code></strong> <a href="/en/CSS" title="CSS">CSS</a> 属性   定义动画在结束前运行的次数 可以是1次 无限循环.</p>
+<p><strong><code>animation-iteration-count</code></strong> <a href="/en/CSS" title="CSS">CSS</a> 属性   定义动画在结束前运行的次数 可以是 1 次 无限循环。</p>
 
 <p>如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。</p>
 
@@ -36,7 +36,7 @@ <h3 id="Values_属性值">Values 属性值</h3>
 
 <dl>
  <dt><code>infinite</code></dt>
- <dd>无限循环播放动画.</dd>
+ <dd>无限循环播放动画。</dd>
  <dt><code>&lt;number&gt;</code></dt>
  <dd>动画播放的次数；默认值为<code>1</code>。可以用小数定义循环，来播放动画周期的一部分：例如，<code>0.5</code> 将播放到动画周期的一半。不可为负值。</dd>
 </dl>

@@ -44,7 +44,7 @@ <h3 id="值">值</h3>
  <dt><code>none</code></dt>
  <dd>特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。</dd>
  <dt><code>IDENT</code></dt>
- <dd>标识动画的字符串，由大小写敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。</dd>
+ <dd>标识动画的字符串，由大小写敏感的字母 a-z、数字 0-9、下划线 (_) 和/或横线 (-) 组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。</dd>
  <dt>
  <h3 id="Formal_syntax">Formal syntax</h3>