mdn · yin1999 · Jun 15, 2022 · Jun 8, 2022 · Jun 8, 2022
@@ -30,10 +30,10 @@ <h2 id="要求">要求</h2>
 
 <h2 id="使用指南">使用指南</h2>
 
-<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
 
 <div class="note">
-<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Download this example</a></p>
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Download this example</a></p>
 </div>
 
 <h2 id="做出选择">做出选择</h2>
@@ -52,10 +52,10 @@ <h2 id="回退方案">回退方案</h2>
 
 <p>对于这种模式有很多种可能的回退方案，取决于你希望支持的浏览器。一个比较号的方案是将图片浮动到左边，并且为盒子添加 clearfix 来确保它包含浮动元素。</p>
 
-<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
 
 <div class="note">
-<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Download this example</a></p>
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Download this example</a></p>
 </div>
 
 <p>一旦浮动元素成为网格项，浮动将不再被应用到网格上，因此你不需要做任何特殊的事情来清楚浮动。</p>

@@ -72,9 +72,9 @@ <h5 id="视口Viewport比例的长度">视口 (Viewport) 比例的长度</h5>
  <dd>视口的初始<a href="/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>的高度的 1%。</dd>
  <dt><code><a name="vh">vw</a></code></dt>
  <dd>视口的初始<a href="/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>的宽度的 1%。</dd>
- <dt id="vi"><code>vi</code>{{experimental_inline}}</dt>
+ <dt><code>vi</code>{{experimental_inline}}</dt>
  <dd>等于初始<a href="/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>大小的 1%，在根元素的<a href="/zh-CN/docs/Web/CSS/CSS_Logical_Properties#inline-dimension">行内轴</a>方向上。</dd>
- <dt id="vb"><code>vb</code>{{experimental_inline}}</dt>
+ <dt><code>vb</code>{{experimental_inline}}</dt>
  <dd>等于初始<a href="/zh-CN/docs/Web/CSS/All_About_The_Containing_Block">包含块</a>大小的 1%，在根元素的<a href="/zh-CN/docs/Web/CSS/CSS_Logical_Properties#block-dimension">区块轴</a>方向上。</dd>
  <dt><code><a name="vmin">vmin</a></code></dt>
  <dd>视口高度 <code>vw</code> 和宽度 <code>vh</code> 两者之间的最小值。</dd>

@@ -12,7 +12,6 @@
 
 <p>{{EmbedInteractiveExample("pages/css/line-height.html")}}</p>
 
-<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
 
 <h2 id="语法">语法</h2>
 

@@ -14,7 +14,6 @@
 
 <div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>
 
-<p class="hidden">这个可交互示例的源码保存在一个 GitHub 仓库中。如果你有兴趣为这个交互示例项目做作出贡献，请 clone 下 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 然后给我们提一个 pull request.</p>
 
 <p>上、下外边框的设置对<em>不<a href="/zh-CN/docs/Web/CSS/Replaced_element">可替换</a></em>内联元素，如 {{HTMLElement("span")}} 和 {{HTMLElement("code")}}，无效。</p>
 

@@ -9,7 +9,6 @@
 
 <div>{{EmbedInteractiveExample("pages/css/outline-color.html")}}</div>
 
-<p class="hidden">这个展示项目的源码由 GitHub 托管 . 如果你对这个展示项目感兴趣，可以 clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并向我们提交一个 pull request.</p>
 
 <p>大多时候使用{{cssxref("outline")}}而不是<code> outline-style</code>,<code> outline-width 和</code><code> outline-color</code>会更方便。</p>
 

@@ -47,28 +47,28 @@ <h2 id="取值">取值</h2>
  <dd>无轮廓 ({{Cssxref("outline-width")}} 为<code> 0</code>).</dd>
  <dt>dotted</dt>
  <br>
- <dd style="outline: 10px dotted red;">轮廓为一系列点。</dd>
+ <dd>轮廓为一系列点。</dd>
  <dt>dashed</dt>
  <br>
- <dd style="outline: 10px dashed red;">轮廓为一系列短线。</dd>
+ <dd>轮廓为一系列短线。</dd>
  <dt>solid</dt>
  <br>
- <dd style="outline: 10px solid red;">轮廓为实线。</dd>
+ <dd>轮廓为实线。</dd>
  <dt>double</dt>
  <br>
- <dd style="outline: 10px double red;">轮廓为两根有空隙的线。{{Cssxref("outline-width")}} 为线与空间的总和。</dd>
+ <dd>轮廓为两根有空隙的线。{{Cssxref("outline-width")}} 为线与空间的总和。</dd>
  <dt>groove</dt>
  <br>
- <dd style="outline: 10px groove red;">轮廓呈凹下状。</dd>
+ <dd>轮廓呈凹下状。</dd>
  <dt>ridge</dt>
  <br>
- <dd style="outline: 10px ridge red;">与<code> groove相反</code>: 轮廓呈凸起状。</dd>
+ <dd>与<code> groove相反</code>: 轮廓呈凸起状。</dd>
  <dt>inset</dt>
  <br>
- <dd style="outline: 10px inset red;">轮廓呈嵌入状。</dd>
+ <dd>轮廓呈嵌入状。</dd>
  <dt>outset</dt>
  <br>
- <dd style="outline: 10px outset red;">与<code> inset相反</code>: 轮廓呈突出状。</dd>
+ <dd>与<code> inset相反</code>: 轮廓呈突出状。</dd>
 </dl>
 
 <h3 id="正式语法">正式语法</h3>

@@ -122,28 +122,28 @@ <h2 id="示例" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">示
 
 <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
 
-<p style="border-style: dotted; border-width: initial; overflow: visible; display: inline-block; width: 12em; height: 6em;"><code>visible</code> (default)<br>
+<p><code>visible</code> (default)<br>
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
 
 <pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">p</code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> { </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">overflow</code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">: hidden; </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">/* 不显示滚动条 */ </code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> }</code></pre>
 
 <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
 
-<p style="border-style: dotted; border-width: initial; overflow: hidden; display: inline-block; width: 12em; height: 6em;"><code>overflow: hidden</code><br>
+<p><code>overflow: hidden</code><br>
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
 
 <pre><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">  p</code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> { </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">overflow</code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">: scroll; </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">/* 始终显示滚动条 */ </code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> }</code></pre>
 
 <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
 
-<p style="border-style: dotted; border-width: initial; overflow: scroll; display: inline-block; width: 12em; height: 6em;"><code>overflow: scroll</code><br>
+<p><code>overflow: scroll</code><br>
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
 
 <pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">p</code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> { </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">overflow</code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">: auto; </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">/* 必要时显示滚动条 */ </code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> }</code></pre>
 
 <div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
 
-<p style="border-style: dotted; border-width: initial; overflow: auto; display: inline-block; width: 12em; height: 6em;"><code>overflow: auto</code><br>
+<p><code>overflow: auto</code><br>
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
 
 <h2 id="规范" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">规范</h2>

@@ -9,7 +9,6 @@
 
 <div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div>
 
-<p class="hidden">这个可交互示例的源码保存在一个 GitHub 仓库中。如果你有兴趣为这个交互示例项目做作出贡献，请 clone 下 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 然后给我们提一个 pull request.</p>
 
 <p>一个元素的内边距区域指的是其内容与其边框之间的空间。</p>
 

@@ -34,7 +34,7 @@ <h3 id="值">值</h3>
  <dd>The name of the axis you want to rotate the affected element around (<code>"x"</code>, "<code>y</code>", or "<code>z"</code>), plus an {{cssxref("&lt;angle&gt;")}} specifying the angle to rotate the element through. Equivalent to a <code>rotateX()</code>/<code>rotateY()</code>/<code>rotateZ()</code> (3D rotation) function.</dd>
  <dt>向量加上角度值</dt>
  <dd>Three {{cssxref("&lt;number&gt;")}}s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an {{cssxref("&lt;angle&gt;")}} specifying the angle to rotate the element through. Equivalent to a <code>rotate3d()</code> (3D rotation) function.</dd>
- <dt id="none"><code>none</code></dt>
+ <dt><code>none</code></dt>
  <dd>指定不应用旋转</dd>
 </dl>
 

@@ -36,7 +36,7 @@ <h3 id="取值">取值</h3>
  <dd>两个数值即分别指定了 2D 比例的 X 轴和 Y 轴的缩放系数，相当于指定了两个值的 scale()（2D 缩放）函数。</dd>
  <dt>三个长度/百分比值</dt>
  <dd>三个数值即分别指定了 3D 比例的 X 轴、Y 轴和 Z 轴的缩放系数。相当于一个 scale3d() 函数。</dd>
- <dt id="none"><code>none</code></dt>
+ <dt><code>none</code></dt>
  <dd>指定不进行缩放。</dd>
 </dl>
 

@@ -9,7 +9,6 @@
 
 <div>{{EmbedInteractiveExample("pages/css/scroll-margin.html")}}</div>
 
-<p class="hidden">这个示例的代码存放在 Github 仓库。如果你想对这个项目贡献代码，请从 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 克隆项目，并且向我们提交 PR。</p>
 
 <p><code>scroll-margin</code> 属性的值代表用于将盒元素拖拽到显示区域的拖拽滚动区域的起点。拖拽滚动区域由是由转换后边框大小的盒元素决定的，它会找到盒元素的矩形边界（在滚动的容器的坐标空间轴上），并添加指定的起点。</p>
 

@@ -46,7 +46,7 @@ <h3 id="Values" name="Values">Values</h3>
   </tbody>
  </table>
 
- <p class="note">注意：scrollbar-width 的长度值有可能从规范中删除，scrollbar-width 属性本身也是如此。 (<a href="https://github.com/w3c/csswg-drafts/issues/1958">Issue 1958</a>)</p>
+ <p>注意：scrollbar-width 的长度值有可能从规范中删除，scrollbar-width 属性本身也是如此。 (<a href="https://github.com/w3c/csswg-drafts/issues/1958">Issue 1958</a>)</p>
 
  <div class="note">
  <p><strong>Note</strong>: User Agents must apply any <code>scrollbar-width</code> value set on the root element to the viewport.</p>

@@ -31,7 +31,7 @@
 text-align: initial;
 text-align: unset;</pre>
 
-<p class="syntaxbox"></p>
+<p></p>
 
 <div class="hidden" id="text-align">
 <pre class="brush: html notranslate">&lt;div class="grid"&gt;
@@ -213,22 +213,22 @@ <h3 id="Live_Examples" style="line-height: 24px;">Live Examples</h3>
 
 <div style="margin-top: 1em; margin-bottom: 1em; border-style: solid; text-align: center;">div { <strong>text-align: center</strong>; border:solid; }
 
-<p style="margin-top: 1em; margin-bottom: 1em; background-color: rgb(255, 215, 0); width: 22em;">p { background:gold; width:22em; }</p>
+<p>p { background:gold; width:22em; }</p>
 some more inline content...</div>
 
 <div style="margin-top: 1em; margin-bottom: 1em; border-style: solid; text-align: center;">div { <strong>text-align: center</strong>; border:solid; }
 
-<p style="margin: 1em auto; background-color: rgb(255, 215, 0); width: 22em;">p { background:gold; width:22em; <strong>margin: 1em auto</strong>; }</p>
+<p>p { background:gold; width:22em; <strong>margin: 1em auto</strong>; }</p>
 some more inline content...</div>
 
 <div style="">div { <strong>text-align:-moz-center</strong>; text-align:-webkit-center; border:solid; }
 
-<p style="margin-top: 1em; margin-bottom: 1em; background-color: rgb(255, 215, 0); width: 22em;">p { background:gold; width:22em; }</p>
+<p>p { background:gold; width:22em; }</p>
 some more inline content...</div>
 
 <h3 id="备注">备注</h3>
 
-<p id=".E5.B1.85.E4.B8.AD.E4.B8.80.E4.B8.AA.E5.9D.97.E5.85.83.E7.B4.A0.E4.B8.94.E4.B8.8D.E5.B1.85.E4.B8.AD.E5.AE.83.E7.9A.84.E5.86.85.E8.81.94.E5.86.85.E5.AE.B9.E7.9A.84.E6.A0.87.E5.87.86.E5.85.BC.E5.AE.B9.E7.9A.84.E6.96.B9.E6.B3.95.E6.98.AF.E5.B0.86.E5.AE.83.E7.9A.84.E5.B7.A6.E3.80.81.E5.8F.B3margin.E8.AE.BE.E4.B8.BAauto.2C_.E4.BE.8B.E5.A6.82.EF.BC.9A">居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右<code style="line-height: 1.5; font-size: 14px; font-style: normal;">margin 设为</code>auto，例如：</p>
+<p>居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右<code style="line-height: 1.5; font-size: 14px; font-style: normal;">margin 设为</code>auto，例如：</p>
 
 <p><code>margin:auto;</code> 或<code>margin:0 auto;</code> 或<code>margin-left:auto; margin-right:auto;</code></p>
 

@@ -114,7 +114,7 @@ <h2 id="Specifications" name="Specifications">规范</h2>
  </tbody>
 </table>
 
-<p id="Browser_compatibility">{{cssinfo}}</p>
+<p>{{cssinfo}}</p>
 
 <h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
 

@@ -52,7 +52,7 @@ <h3 id="值">值</h3>
 
  <p>但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放，你可能看到并不太漂亮的文本渲染，但这个字体大小是你期望的，而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。</p>
 
- <p class="note"><strong>提示</strong>: WebKit 准确地的实现了这个值，但是 Gecko 把这个值按照 <code>optimizeLegibility 处理。</code></p>
+ <p><strong>提示</strong>: WebKit 准确地的实现了这个值，但是 Gecko 把这个值按照 <code>optimizeLegibility 处理。</code></p>
  </dd>
 </dl>
 

@@ -20,7 +20,7 @@ <h2 id="语法">语法</h2>
 
 <pre class="brush: css">scale(<em>sx</em>)</pre>
 
-<p class="syntaxbox">或</p>
+<p>或</p>
 
 <pre class="brush: css">scale(<em>sx</em>, <em>sy</em>)</pre>
 

@@ -61,9 +61,9 @@ <h2 id="语法">语法</h2>
 <h3 id="值">值</h3>
 
 <dl>
- <dt id="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</dt>
+ <dt>{{cssxref("&lt;transform-function&gt;")}}</dt>
  <dd>要应用的一个或多个 CSS 变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。</dd>
- <dt id="none"><code>none</code></dt>
+ <dt><code>none</code></dt>
  <dd>不应用任何变换。</dd>
 </dl>
 

@@ -40,7 +40,7 @@ <h3 id="值">值</h3>
  <dd>两个长度值或百分比表示在二维上分别按照指定 X 轴和 Y 轴的值进行的平移。等同于在 <code>translate()</code> 函数（2D 平移）中函数指定两个值。</dd>
  <dt>三个长度/百分比值</dt>
  <dd>三个长度值或百分比，表示分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于<code>translate3d()</code> 函数（3D 平移）。</dd>
- <dt id="none"><code>none</code></dt>
+ <dt><code>none</code></dt>
  <dd>表示不应用平移效果。</dd>
 </dl>
 

@@ -12,7 +12,7 @@
 
 <p><code>unicode-bidi</code> 与 {{cssxref("direction")}} 是仅有的两个不受 {{cssxref("all")}} 简写影响的属性。</p>
 
-<p class="note"><strong>注意：</strong>此属性是文档类型定义（Document Type Definition, DTD）的设计者专用的。Web 设计者与其他类似的人员不应覆盖此属性。</p>
+<p><strong>注意：</strong>此属性是文档类型定义（Document Type Definition, DTD）的设计者专用的。Web 设计者与其他类似的人员不应覆盖此属性。</p>
 
 <pre class="brush: css">/* 关键字值 */
 unicode-bidi: normal;

@@ -42,7 +42,7 @@ <h2 id="Examples" name="Examples">示例</h2>
 
 <p>A green span in a red paragraph.</p>
 
-<p style="border: 1px solid blue;">A red span in a green paragraph (with a border.)</p>
+<p>A red span in a green paragraph (with a border.)</p>
 
 <div class="note">注：笔者不推荐使用通配选择器，因为它是<a class="external" href="http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/">性能最低的一个 CSS 选择器</a>.</div>