delete conflicting/orphaned docs (zh-CN) (#1412)

* delete conflicting docs (zh-CN) * and redirects * do orphaned as well * fix * remove more orphans * revert orphaned docs that can identify origin * move orphaned docs to current loc * adjust slug path * fix redirect change from rebase Co-authored-by: Irvin <irvinfly@gmail.com>
author: Peter Bengtsson <mail@peterbe.com> 2021-07-16 16:27:00 -0400
committer: GitHub <noreply@github.com> 2021-07-17 04:27:00 +0800
commit: b9afb23d12dcae1e09f8d04c72143c5ddaa34aea (patch)
tree: f6c20844119bcaf0131ad4a037e0245577927f2c /files/zh-cn/conflicting/web/css
parent: 1aa671566c3a990ec2df9a46137471d624b6f7ff (diff)
download: translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.tar.gz
translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.tar.bz2
translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.zip
16 files changed, 0 insertions, 2547 deletions
diff --git a/files/zh-cn/conflicting/web/css/@viewport/index.html b/files/zh-cn/conflicting/web/css/@viewport/index.html
deleted file mode 100644
index c4cf323178..0000000000
--- a/files/zh-cn/conflicting/web/css/@viewport/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: height
-slug: conflicting/Web/CSS/@viewport
-translation_of: Web/CSS/@viewport
-translation_of_original: Web/CSS/@viewport/height
-original_slug: Web/CSS/@viewport/height
----
-<div>{{CSSRef}}</div>
-
-<div><code><strong>height</strong></code><strong> </strong>CSS 属性是同时设置可视区 {{cssxref("@viewport/min-height", "min-height")}} and {{cssxref("@viewport/max-height", "max-height")}} 的简写。当你设置一个值的时候，最小高度（minimum height）和最大高度（maximum height）会被同时设置。</div>
-
-<p>如果提供两个值，第一个值会被设置为最小高度，第二个值将会被设置为最大高度。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="brush: css notranslate">/* One value */
-height: auto;
-height: 320px;
-height: 15em;
-
-/* Two values */
-height: 320px 200px;
-</pre>
-
-<h3 id="合法值">合法值</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>真实生效的高度值将根据其他 CSS 属性计算得出。</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>一个非负的绝对或相对值。</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>一个相对于缩放因子是 1.0 的初始可视区宽高的百分比值，水平和垂直方向的长度分别计算。不能是负值。</dd>
-</dl>
-
-<h2 id="正式定义">正式定义</h2>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="正式语法">正式语法</h2>
-
-{{csssyntax}}
-
-<h2 id="示例">示例</h2>
-
-<h3 id="设置最小和最大高度">设置最小和最大高度</h3>
-
-<pre class="brush: css notranslate">@viewport {
-  height: 500px;
-}</pre>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
-   <td>{{Spec2('CSS3 Device')}}</td>
-   <td>初始定义</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-
-
-<p>{{Compat("css.at-rules.viewport.height")}}</p>
-
-<h2 id="同时查看">同时查看</h2>
-
-<ul>
- <li>{{cssxref("@viewport")}}</li>
-</ul>
diff --git a/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html b/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html
deleted file mode 100644
index f7fd64d116..0000000000
--- a/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: orientation
-slug: conflicting/Web/CSS/@viewport_7861ca3461a359b150d44f2c8d74e53a
-tags:
-  - CSS
-  - CSS Description
-translation_of: Web/CSS/@viewport
-translation_of_original: Web/CSS/@viewport/orientation
-original_slug: Web/CSS/@viewport/orientation
----
-<div>{{CSSRef}}</div>
-
-<h2 id="摘要">摘要</h2>
-
-<p>此 <strong><code>orientation</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> 描述符控制由{{cssxref("@viewport")}}定义文档的方向。</p>
-
-<p><span style="line-height: 1.5;">通过设备的倾斜摆动情况来决定文档显示的方向，作者可以通过设置这个描述符来抑制方向的变化{{cssinfo}}</span></p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="brush:css">/* Keyword values */
-orientation: auto;
-orientation: portrait;/*锁定为纵向*/
-orientation: landscape;/* 锁定为横向*/
-</pre>
-
-<h3 id="取值">取值</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>用户代理将文档的方向设置为自动，通常基于设备的定位由加速度传感器 （如果设备具有这种硬件传感器），但是用户控制，OS 级别的"锁方向"往往会优先于加速度传感器的设置。</dd>
- <dt><code>portrait</code></dt>
- <dd>文档被锁定为纵向。</dd>
- <dt><code>landscape</code></dt>
- <dd>文档被锁定为横向。</dd>
-</dl>
-
-<h3 id="标准语法">标准语法</h3>
-
-{{csssyntax}}
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">规范</th>
-   <th scope="col">标准</th>
-   <th scope="col">注释</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td>
-   <td>{{Spec2('CSS3 Device')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>10 {{property_prefix("-ms")}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>8 {{property_prefix("-o")}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html
deleted file mode 100644
index a68fbedc8d..0000000000
--- a/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: viewport-fit
-slug: conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f
-translation_of: Web/CSS/@viewport
-translation_of_original: Web/CSS/@viewport/viewport-fit
-original_slug: Web/CSS/@viewport/viewport-fit
----
-<div>{{CSSRef}} {{Draft}} {{SeeCompatTable}}</div>
-
-<p><strong><code>viewport-fit</code></strong> CSS {{CSSxRef("@viewport")}}  {{Glossary("Descriptor (CSS)", "descriptor")}} 是为了控制文档是如何填充满屏幕的。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="brush: css; no-line-numbers">/* 关键值*/
-viewport-fit: auto;
-viewport-fit: contain;
-viewport-fit: cover;
-</pre>
-
-<h3 id="属性值">属性值</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>此值不影响初始布局视图端口，并且整个web页面都是可查看的。</dd>
- <dt><code>contain</code></dt>
- <dd>视图端口按比例缩放，以适合显示内嵌的最大矩形。</dd>
- <dt><code>cover</code></dt>
- <dd>视图端口被缩放以填充设备显示。强烈建议使用 <a href="/en-US/docs/Web/CSS/env">safe area inset 变量</a>，以确保重要内容不会出现在显示之外。</dd>
-</dl>
-
-<h3 id="形式语法">形式语法</h3>
-
-<pre><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1.0, <strong>viewport-fit=cover</strong>"</span><span style="color: #0000ff;">&gt;</span></pre>
-
-<h2 id="注意">注意</h2>
-
-<p>在使用 <code>viewport-fit</code> 描述符时，必须记住并不是所有的设备显示都是矩形的，因此应该使用<a href="/en-US/docs/Web/CSS/env">safe area inset 变量</a>。</p>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td>
-   <td>{{Spec2("CSS Round Display")}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p>
-
-<h2 id="另请参见">另请参见</h2>
-
-<ul>
- <li>{{CSSxRef("env", "env()")}}</li>
-</ul>
diff --git a/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html
deleted file mode 100644
index 709a42b3d1..0000000000
--- a/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: width
-slug: conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848
-translation_of: Web/CSS/@viewport
-translation_of_original: Web/CSS/@viewport/width
-original_slug: Web/CSS/@viewport/width
----
-<div>{{CSSRef}}</div>
-
-<p>The <strong>width</strong> CSS descriptor is shorthand for setting both the <a href="/zh-CN/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a> and the <a href="/zh-CN/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a> descriptors of the viewport. By providing one viewport length value, that value will determine both the <code>min-width</code> and the <code>max-width</code> to the value provided.</p>
-
-<p>If two viewport values are provided the first value will be set to the <code>min-width</code> and the second value will be set <code>max-width</code>.</p>
-
-<h2 id="Syntax" name="Syntax">Syntax</h2>
-
-<pre class="brush: css">/* An example with one viewport value: */
-@viewport {
-    width: 320px;
-}
-
-/* An example with two viewport values: */
-@viewport {
-    width: 320px, 120px;
-}
-
-</pre>
-
-
-
-<h3 id="Values" name="Values">Values</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>The used value is calculated from the other CSS descriptors' values.</dd>
- <dt><code>&lt;length&gt;</code></dt>
- <dd>A non-negative absolute or relative length.</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>A percentage value relative to the width or height of the <span class="css">initial viewport</span> at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.</dd>
-</dl>
-
-<h3 id="Formal_syntax">Formal syntax</h3>
-
-<pre class="syntaxbox">auto <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">&lt;length&gt;</a> <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/percentage" title="">&lt;percentage&gt;</a></pre>
-
-<h2 id="Specifications" name="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td>
-   <td>{{Spec2('CSS3 Device')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table" style="height: 93px; width: 950px;">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>29 (behind a flag)</td>
-   <td>{{CompatNo}}</td>
-   <td>10 {{property_prefix("-ms")}}</td>
-   <td>11.10<br>
-    Removed in 15<br>
-    Reintroduced behind a flag in 16</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table" style="height: 93px; width: 948px;">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>
-    <table class="compat-table">
-     <tbody>
-      <tr>
-       <td>4.4</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>
-    <table class="compat-table">
-     <tbody>
-      <tr>
-       <td>29</td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td>{{CompatNo}}</td>
-   <td>10{{property_prefix("-ms")}}</td>
-   <td>11.10<br>
-    Removed in 15<br>
-    Reintroduced behind a flag in 16</td>
-   <td>{{CompatNo}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html
deleted file mode 100644
index 3ba2f5579c..0000000000
--- a/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: zoom
-slug: conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518
-tags:
-  - CSS
-  - CSS Descriptor
-translation_of: Web/CSS/@viewport
-translation_of_original: Web/CSS/@viewport/zoom
-original_slug: Web/CSS/@viewport/zoom
----
-<div>{{ CSSRef }}</div>
-
-<p><strong><code>zoom</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 属性会根据 {{cssxref("@viewport")}} 来初始化一个缩放因数。</p>
-
-<p>当设置<code>1.0</code> 或 <code>100%</code>时表示不缩放。更大的值放大，更小的值缩小。</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="brush:css">/* Keyword value */
-zoom: auto;
-
-/* &lt;number&gt; values */
-zoom: 0.8;
-zoom: 2.0;
-
-/* &lt;percentage&gt; values */
-zoom: 150%;
-</pre>
-
-<h3 id="值">值</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>根据`viewport`来既定当前标签的缩放。</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>必须是一个非负数。1表示没有缩放，大于1表示放大的倍数，小于1亦然。</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>必须是一个非负的百分比。以100%为基础进行缩放。</dd>
-</dl>
-
-<h3 id="形式语法">形式语法</h3>
-
-{{csssyntax}}
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td>
-   <td>{{Spec2('CSS3 Device')}}</td>
-   <td>Initial specification</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容">浏览器兼容</h2>
-
-
-
-<p>{{Compat("css.at-rules.viewport.zoom")}}</p>
diff --git a/files/zh-cn/conflicting/web/css/_colon_is/index.html b/files/zh-cn/conflicting/web/css/_colon_is/index.html
deleted file mode 100644
index 5ffedac0bc..0000000000
--- a/files/zh-cn/conflicting/web/css/_colon_is/index.html
+++ /dev/null
@@ -1,191 +0,0 @@
----
-title: ':any'
-slug: conflicting/Web/CSS/:is
-tags:
-  - CSS
-  - 伪类选择器
-  - 实验性
-translation_of: Web/CSS/:is
-translation_of_original: Web/CSS/:any
-original_slug: Web/CSS/:any
----
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p>The <code>:any()</code> <a href="/en-US/docs/CSS/Pseudo-classes" title="CSS/Pseudo-classes">pseudo-class</a> lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.</p>
-
-<p>译文：any()伪类可以让您快速构建类似的选择器集合，通过建立包含所有包含项的组来匹配。这是另一种选择，它必须重复整个选择器，因为其中一个项目是不同的。</p>
-
-<div class="note"><strong>Note : </strong>This pseudo-class is in progress to be standardized in <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> under the name <code>:matches()</code>. It is likely that the syntax and name of <code>:-<em>vendor</em>-any()</code> will be changed to reflect it in the near future.</div>
-
-<div class="note">注意:这个伪类正在CSS选择器第4级按照名称:matches()进行标准化。很可能的语法和名称:- vendor-any()将在不久的将来被更改以反映它。</div>
-
-<h2 id="Syntax" name="Syntax">语法</h2>
-
-{{csssyntax}}
-
-<h3 id="Values" name="Values">值</h3>
-
-<dl>
- <dt><code>selector</code></dt>
- <dd>选择器。这可以是由 <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">CSS 3 简单选择器</a> 组成的简单选择器或多重选择器，并且可以包含后代组合器。</dd>
-</dl>
-
-<div class="note"><strong>注意：</strong>选择器可以<strong>不</strong>包含伪元素，并且仅允许的组合器是后代组合器。</div>
-
-<h2 id="Examples" name="Examples">例子</h2>
-
-<p>举个例子，如以下 CSS：</p>
-
-<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */
-ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
-ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
-ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
-ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
-ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
-ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
-menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
-menu ol menu, menu ul menu, menu menu menu, menu dir menu,
-menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
-dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
-dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
-dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
-  list-style-type: square;
-}
-</pre>
-
-<p>可以写成这样：</p>
-
-<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
-  list-style-type: square;
-}</pre>
-
-<p>但是，不能写成这样（详见<a href="#Issues_with_performance_and_specificity">the section on performance</a>）：</p>
-
-<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
-  list-style-type: square;
-}</pre>
-
-<h2 id="Notes" name="Notes">Notes</h2>
-
-<p>译文： 这个伪类选择器会在处理 HTML5 的 <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections and headings</a> 中尤其有用。因为 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, 和 {{HTMLElement("nav")}} 可以被嵌套，如果不使用  <code>:any()</code> ，为了去匹配这些标签来给予样式会变得困难。</p>
-
-<p>举个例子，当不使用 <code>:any()</code> ，给予不同的 DOM  结点层次深度下的所有的 {{HTMLElement("h1")}}  的元素样式时，将会变得特别的复杂。</p>
-
-<pre class="brush: css">/* Level 0 */
-h1 {
-  font-size: 30px;
-}
-/* Level 1 */
-section h1, article h1, aside h1, nav h1 {
-  font-size: 25px;
-}
-/* Level 2 */
-section section h1, section article h1, section aside h1, section nav h1,
-article section h1, article article h1, article aside h1, article nav h1,
-aside section h1, aside article h1, aside aside h1, aside nav h1,
-nav section h1, nav article h1, nav aside h1, nav nav h1, {
-  font-size: 20px;
-}
-/* Level 3 */
-/* ... don't even think about it*/
-</pre>
-
-<p>然而，通过使用  <code>:any()</code> ，这将变得很简单：</p>
-
-<pre class="brush: css">/* Level 0 */
-h1 {
-  font-size: 30px;
-}
-/* Level 1 */
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 25px;
-}
-/* Level 2 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 20px;
-}
-/* Level 3 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 15px;
-}</pre>
-
-<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">性能与特异性问题</h3>
-
-<p><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561154" title="https://bugzilla.mozilla.org/show_bug.cgi?id=561154">Bug 561154</a> 追踪了一个关于 Gecko 作为内核的浏览器在使用 <code>:-moz-any()</code> 不正确的问题。在最新的浏览器(从 Firefox 12) 实现 <code>:-moz-any()</code> 有一个通用的规则，在使用这个伪类选择器时，当使用它作为最右边的选择器会比使用 ID, Class, 标签选择器作为最右边的选择器要来的慢。</p>
-
-<p>例如:</p>
-
-<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
-</pre>
-
-<p>会比下面的表达式慢</p>
-
-<pre class="brush: css">.a &gt; .b, .a &gt; .c
-</pre>
-
-<p>而下面的表达式将会是最快的</p>
-
-<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c
-</pre>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Firefox (Gecko)</th>
-   <th>Chrome</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td>
-   <td>12.0 (534.30){{property_prefix("-webkit")}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>5<br>
-    {{property_prefix("-webkit")}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>5<br>
-    {{property_prefix("-webkit")}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html b/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html
deleted file mode 100644
index af8a706fa9..0000000000
--- a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: ':-moz-placeholder'
-slug: conflicting/Web/CSS/:placeholder-shown
-tags:
-  - CSS
-  - CSS Pseudo-class
-  - CSS Reference
-  - Non-standard
-translation_of: Web/CSS/:placeholder-shown
-translation_of_original: Web/CSS/:-moz-placeholder
-original_slug: Web/CSS/:-moz-placeholder
----
-<p> </p>
-
-<div class="note"><strong>提示:</strong> <code><em>在Firefox 19+版本中</em> :-moz-placeholder</code> 伪类将被 {{ cssxref('::-moz-placeholder') }} 伪元素所替代.</div>
-
-<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name.  {{bug(1069012)}}</div>
-
-<p>{{ CSSRef() }}{{Non-standard_header}}{{ gecko_minversion_header("2.0") }}</p>
-
-<h2 id="Summary" name="Summary">摘要</h2>
-
-<p><code> :-moz-placeholder</code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>控制元素所显示的文字占位符<a href="/en/HTML/Forms_in_HTML#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">文字占位符</a>. 它允许开发者/设计师改变文字占位符样式. 默认的文字占位符颜色为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.</p>
-
-<h2 id="示例">示例</h2>
-
-<p>这个示例将文字占位符改变为了绿色.</p>
-
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Placeholder demo&lt;/title&gt;
-  &lt;style type="text/css"&gt;
-    input:-moz-placeholder {
-      color: green;
-    }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;input id="test" placeholder="Placeholder text!"&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">查看这个示例</a>.</p>
-
-<h2 id="溢出">溢出</h2>
-
-<p>在手机等设备上搜索框和表单字段经常会缩的很短,有时输入框并不能完全显示文字占位符,那么它便会被生硬的"切断".为了防止出现这种难看的效果,可以使用CSS <code>text-overflow: ellipsis;</code> 来省略一中间部分文字.</p>
-
-<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; }
-::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
-input:-moz-placeholder { text-overflow: ellipsis; }
-</pre>
-
-<p>It was David Walsh, the man on fire who introduced this to a lot of designers. <a class="external" href="http://davidwalsh.name/placeholder-overflow" title="Placeholders and Overflow">Placeholders and Overflow</a>.</p>
-
-<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2>
-
-<p>{{ Bug(457801) }}</p>
-
-<h2 id="SeeAlso" name="SeeAlso">See also</h2>
-
-<ul>
- <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li>
- <li>{{ HTMLElement("input") }}</li>
- <li>{{ HTMLElement("textarea") }}</li>
-</ul>
diff --git a/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html b/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html
deleted file mode 100644
index b66dc3a6ef..0000000000
--- a/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: '::-moz-placeholder'
-slug: conflicting/Web/CSS/::placeholder
-tags:
-  - CSS
-  - CSS Pseudo-class
-  - CSS Reference
-  - Non-standard
-translation_of: Web/CSS/::placeholder
-translation_of_original: Web/CSS/::-moz-placeholder
-original_slug: Web/CSS/::-moz-placeholder
----
-<div>{{Non-standard_header}}{{CSSRef}}</div>
-
-<div class="note"><strong>提示:</strong> {{cssxref('::-moz-placeholder')}} 伪元素在Firefox 19+替代了之前的 <code>:-moz-placeholder </code>伪类.</div>
-
-<div>{{gecko_minversion_header("19.0")}}</div>
-
-<h2 id="摘要">摘要</h2>
-
-<p> <code>::-moz-placeholder</code> 伪元素控制元素所显示的文字占位符.它允许开发者/设计师改变文字占位符的样式.默认的文字占位符为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.</p>
-
-<h2 id="示例">示例</h2>
-
-<h3 id="HTML_内容">HTML 内容</h3>
-
-<pre class="brush: html">&lt;input id="test" placeholder="Placeholder text!"&gt;</pre>
-
-<h3 id="CSS_内容">CSS 内容</h3>
-
-<pre class="brush: css">input::-moz-placeholder {
-  color: green;
-}</pre>
-
-<p>{{EmbedLiveSample('%E7%A4%BA%E4%BE%8B', '100%', 100)}}</p>
-
-<p> </p>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<table>
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-
-<table>
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Firefox OS</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{CompatUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-
-<p>[1] Firefox 对placeholder文本默认应用<code>{{cssxref("opacity")}}:0.54。详见</code>{{Bug("556145")}}。大多数主流浏览器目前不会对placeholder文本伪元素或者伪类应用默认样式。</p>
-
-<p>Gecko 此前将本属性视为 {{cssxref(":-moz-placeholder")}}。详见 {{Bug("737786")}}.</p>
-
-<h2 id="See_also" name="See_also">See also</h2>
-
-<ul>
- <li>{{cssxref("::placeholder")}}</li>
- <li>{{cssxref("::-webkit-input-placeholder")}}</li>
- <li>{{cssxref(":-ms-input-placeholder")}}</li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Forms_in_HTML">Forms in HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li>{{HTMLElement("textarea")}}</li>
-</ul>
diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html
deleted file mode 100644
index 8fe764c269..0000000000
--- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: CSS Background and Borders
-slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders
-tags:
-  - CSS
-  - CSS Backgrounds and Borders
-  - CSS Reference
-  - NeedsTranslation
-  - Overview
-  - TopicStub
-translation_of: Web/CSS/CSS_Backgrounds_and_Borders
-translation_of_original: Web/CSS/CSS_Background_and_Borders
-original_slug: Web/CSS/CSS_Background_and_Borders
----
-<p>{{CSSRef}}</p>
-
-<p><strong>CSS 背景与边框</strong> 是 CSS中描述元素背景与边框的组件。边框的实现方式包含直线、图片。盒模型可以具有单个或多个背景、圆角以及阴影。</p>
-
-<h2 id="参考">参考</h2>
-
-<h3 id="CSS_属性">CSS 属性</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("background")}}</li>
- <li>{{cssxref("background-attachment")}}</li>
- <li>{{cssxref("background-clip")}}</li>
- <li>{{cssxref("background-color")}}</li>
- <li>{{cssxref("background-image")}}</li>
- <li>{{cssxref("background-origin")}}</li>
- <li>{{cssxref("background-position")}}</li>
- <li>{{cssxref("background-repeat")}}</li>
- <li>{{cssxref("background-size")}}</li>
- <li>{{cssxref("box-shadow")}}</li>
- <li>{{cssxref("border")}}</li>
- <li>{{cssxref("border-bottom")}}</li>
- <li>{{cssxref("border-bottom-color")}}</li>
- <li>{{cssxref("border-bottom-left-radius")}}</li>
- <li>{{cssxref("border-bottom-right-radius")}}</li>
- <li>{{cssxref("border-bottom-style")}}</li>
- <li>{{cssxref("border-bottom-width")}}</li>
- <li>{{cssxref("border-collapse")}}</li>
- <li>{{cssxref("border-color")}}</li>
- <li>{{cssxref("border-image")}}</li>
- <li>{{cssxref("border-image-outset")}}</li>
- <li>{{cssxref("border-image-repeat")}}</li>
- <li>{{cssxref("border-image-slice")}}</li>
- <li>{{cssxref("border-image-source")}}</li>
- <li>{{cssxref("border-image-width")}}</li>
- <li>{{cssxref("border-left")}}</li>
- <li>{{cssxref("border-left-color")}}</li>
- <li>{{cssxref("border-left-style")}}</li>
- <li>{{cssxref("border-left-width")}}</li>
- <li>{{cssxref("border-radius")}}</li>
- <li>{{cssxref("border-right")}}</li>
- <li>{{cssxref("border-right-color")}}</li>
- <li>{{cssxref("border-right-style")}}</li>
- <li>{{cssxref("border-right-width")}}</li>
- <li>{{cssxref("border-style")}}</li>
- <li>{{cssxref("border-top")}}</li>
- <li>{{cssxref("border-top-color")}}</li>
- <li>{{cssxref("border-top-left-radius")}}</li>
- <li>{{cssxref("border-top-right-radius")}}</li>
- <li>{{cssxref("border-top-style")}}</li>
- <li>{{cssxref("border-top-width")}}</li>
- <li>{{cssxref("border-width")}}</li>
-</ul>
-</div>
-
-<h2 id="导航">导航</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">应用CSS多重背景</a></dt>
- <dd>阐述设置元素背景方法以及背景、元素之间的交互方式</dd>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">缩放背景图片</a></dt>
- <dd>阐述如何通过拉伸、重复使背景图片覆盖或不全部覆盖元素的背景区域，更改背景图片的呈现方式。</dd>
-</dl>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Backgrounds') }}</td>
-   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#border')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器支持">浏览器支持</h2>
-
-<p>{{CompatibilityTable()}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoDesktop("1.0")}}</td>
-   <td>4.0</td>
-   <td>3.5</td>
-   <td>1.0 (85)</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatVersionUnknown()}}</td>
-   <td>{{CompatGeckoMobile("1.9.2")}}</td>
-   <td>{{CompatVersionUnknown()}}</td>
-   <td>{{CompatVersionUnknown()}}</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
deleted file mode 100644
index 8d64addd68..0000000000
--- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: 缩放背景图像
-slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
-tags:
-  - Advanced
-  - CSS
-  - CSS Background
-  - Graphics
-  - Guide
-  - Web
-  - 背景图片
-translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
-translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images
-original_slug: Web/Guide/CSS/Scaling_background_images
----
-<div>{{cssref}}</div>
-
-<p><span style="line-height: 1.5;">CSS 的 </span> {{ cssxref("background-size") }}<span style="line-height: 1.5;"> 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。</span></p>
-
-<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">拼一张大图</h2>
-
-<p><span style="line-height: 1.5;">来考虑一张大图，一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里</span>（出于某种原因，很可能是某个非常糟糕的网站设计）<span style="line-height: 1.5;">，最终的效果如下：</span></p>
-
-<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p>
-
-<p>用下面的 CSS 可以实现这种效果：</p>
-
-<pre class="brush: css;  highlight:[8]">.square {
-  width: 300px;
-  height: 300px;
-  background-image: url(fxlogo.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-} </pre>
-
-<div>没必要再用带前缀的 background-size 了，<span style="line-height: 1.5;">尽管你可能考虑到要兼容一些非常老的浏览器版本，而用带前缀的写法。</span></div>
-
-<h2 id="Stretching_an_image" name="Stretching_an_image">拉伸图片</h2>
-
-<p>你可以同时指定图片纵向和横向的大小，如下：</p>
-
-<pre class="brush:css">background-size: 300px 150px;
-</pre>
-
-<p>结果会是这样的：<br>
- <img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p>
-
-<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">放大图片</h2>
-
-<p>另一方面，你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px：</p>
-
-<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p>
-
-<pre class="brush: css; highlight:[5]">.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-</pre>
-
-<p>正如你所看到的，CSS 的写法实际上是基本相同的。</p>
-
-<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特殊值:  "contain" 和 "cover"</h2>
-
-<p>除了{{cssxref("&lt;length&gt;")}} 值外，{{ cssxref("background-size") }} 还提供了另外两个特殊的尺寸值：contain 和 cover。</p>
-
-<h3 id="contain" name="contain"><code>contain</code></h3>
-
-<p><span style="line-height: 1.5;">contain 值指定可以不用考虑容器的大小，</span><span style="line-height: 1.5;">把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域</span><span style="line-height: 1.5;">。</span><span style="line-height: 1.5;">在支持背景图缩放的浏览器（比如Firefox 3.6+）中，改变这个窗口的大小，</span><span style="line-height: 1.5;">来看看下方这个例子。</span></p>
-
-<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
-  &lt;p&gt;Try resizing this window.<code>Right-click-&gt;This Frame-&gt;Open Frame in New Tab</code>&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush:css;highlight:[4]">.bgSizeContain {
-  height: 200px;
-  background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}</pre>
-
-<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p>
-
-<h3 id="cover" name="cover"><code>cover</code></h3>
-
-<p><span style="line-height: 1.5;">cover 属性指定背景图可以被调整到任意大小，</span><span style="line-height: 1.5;">以使背景图完全覆盖背景区域</span><span style="line-height: 1.5;">。</span></p>
-
-<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
-  &lt;p&gt;Try resizing this window.Right-click-&gt;This Frame-&gt;Open Frame in New Tab&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush:css;highlight:[4]">.bgSizeCover {
-  height: 200px;
-  background-image: url('/files/2917/fxlogo.png');
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000;
-  text-shadow: 1px 1px 0 #fff;
-}</pre>
-
-<p>{{ EmbedLiveSample("cover", "100%", "220") }}</p>
-
-<h2 id="See_also" name="See_also">另请参阅</h2>
-
-<ul>
- <li>{{ cssxref("background-size") }}</li>
- <li>{{ cssxref("background") }}</li>
-</ul>
diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
deleted file mode 100644
index b1d5ee045e..0000000000
--- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: 使用CSS的多背景
-slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
-tags:
-  - CSS
-  - CSS Background
-  - Example
-  - Guide
-  - Intermediate
-translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
-translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
-original_slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
----
-<p>{{CSSRef}}</p>
-
-<p><span class="seoSummary">通过使用 <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>，你可以向元素应用<strong>多个背景</strong>。这些背景相互堆叠，第一个背景放在最上面，最后一个背景放在最下面。</span> 仅最后一个背景允许拥有背景色。</p>
-
-<p>指定多个背景很简单：</p>
-
-<pre class="brush: css">.myclass {
-  background: background1, background 2, ..., backgroundN;
-}
-</pre>
-
-<p>你既可以使用简写属性 {{ cssxref("background") }} 来设置多个背景，也可以使用除 {{ cssxref("background-color") }} 外的独立属性来设置多个背景。即下面的属性可以用属性列表来设置每一个背景： {{ cssxref("background") }}，{{ cssxref("background-attachment") }}，{{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}，{{ cssxref("background-origin") }}，{{ cssxref("background-position") }}， {{ cssxref("background-repeat") }}， {{ cssxref("background-size") }}。</p>
-
-<h2 id="示例">示例</h2>
-
-<p>该例中，三个背景进行堆叠：火狐标志,一个<a href="/en/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">线性渐变</a>， 和一张带有花的图片：</p>
-
-<pre class="brush: css">.multi_bg_example {
-  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
-        linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
-        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
-  background-repeat: no-repeat, no-repeat, repeat;
-  background-position: bottom right, left, right;
-}
-</pre>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">结果</td>
-  </tr>
-  <tr>
-   <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td>
-  </tr>
- </tbody>
-</table>
-
-<p>如你所见，火狐标志（列表第一项）在最上面，紧接着是放在图片上面的线性渐变。每个子属性 ({{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}) 应用于对应的背景。因此属性 {{ cssxref("background-repeat") }} 的第一个值应用于第一个（最前面）的背景，依次可推。</p>
-
-<h2 id="其它">其它</h2>
-
-<ul>
- <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">使用CSS渐变</a></li>
-</ul>
-
-<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div>
-
-<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"> </div>
diff --git a/files/zh-cn/conflicting/web/css/css_color/index.html b/files/zh-cn/conflicting/web/css/css_color/index.html
deleted file mode 100644
index 65153a61df..0000000000
--- a/files/zh-cn/conflicting/web/css/css_color/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: CSS Colors
-slug: conflicting/Web/CSS/CSS_Color
-tags:
-  - CSS
-  - CSS Colors
-  - NeedsTranslation
-  - Overview
-  - Reference
-  - TopicStub
-translation_of: Web/CSS/CSS_Color
-translation_of_original: Web/CSS/CSS_Colors
-original_slug: Web/CSS/CSS_Colors
----
-<div>{{CSSRef}}</div>
-
-<p><strong>CSS Colors</strong> 是 CSS 的一个模块，用于处理颜色、颜色类型和透明度。</p>
-
-<h2 id="参考_(Reference)">参考 (Reference)</h2>
-
-<h3 id="属性">属性</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("color")}}</li>
- <li>{{cssxref("opacity")}}</li>
-</ul>
-</div>
-
-<h3 id="CSS_数据类型">CSS 数据类型</h3>
-
-<p>{{cssxref("&lt;color&gt;")}}</p>
-
-<h2 id="指南_(Guides)">指南 (Guides)</h2>
-
-<p><em>None.</em></p>
-
-<h2 id="规范_(Specifications)">规范 (Specifications)</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Colors')}}</td>
-   <td>{{Spec2('CSS3 Colors')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性_(Browser_compatibility)">浏览器兼容性 (Browser compatibility)</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoDesktop("1")}}</td>
-   <td>3.0</td>
-   <td>3.5</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoMobile("1")}}</td>
-   <td>6.0</td>
-   <td>6.0</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="另请阅读">另请阅读</h2>
-
-<ul>
- <li>在 CSS 中， gradient 渐变色并非颜色，其实质是 <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>。</li>
-</ul>
diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
deleted file mode 100644
index 64120aad99..0000000000
--- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
+++ /dev/null
@@ -1,409 +0,0 @@
----
-title: 使用弹性盒子进行高级布局
-slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
-tags:
-  - CSS3布局模型
-  - Flexible_Box
-  - Flexible_Box_Layout
-  - Layout
-  - 弹性盒子
-  - 弹性盒子模型
-translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins
-original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
----
-<p>使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。</p>
-
-<h3 id="浮动布局的问题">浮动布局的问题</h3>
-
-<ul>
- <li><strong>难以控制。</strong>如果站点上存在一些不可预知的内容，那么布局将变的难以维护。</li>
- <li><strong>源码顺序依赖</strong>。弹性布局依赖于HTML源码，在做响应式设计时将难以为不同的媒体查询变更布局。</li>
- <li><strong>列等高问题</strong>。如果容器中有两到三列不同的内容，并且在任意内容的条件下，都需要设置为相同的高度。浮动布局难以实现这个要求。</li>
- <li><strong>内容居中</strong>。使用浮动布局难以将内容水平且垂直居中。</li>
-</ul>
-
-<h3 id="弹性盒子如何处理">弹性盒子如何处理</h3>
-
-<ul>
- <li>通过将弹性元素拉伸或缩小来充满可用空间和避免溢出。这种方式解决了新内容的溢出问题并且以开发者期望的情况实施布局。</li>
- <li>给予弹性元素成比例的尺寸。</li>
- <li>弹性容器内的弹性元素可以从任意方向布局。可以解决在不同媒体查询中元素的顺序问题。使得可见内容的顺序独立于HTML渲染顺序，有利于站点的响应式设计。</li>
-</ul>
-
-<h3 id="弹性盒子属性">弹性盒子属性</h3>
-
-<p><img alt="placeholder" src="http://saki007ster.github.io/public/images/flex-container.png" title="Flexbox properties"></p>
-
-<ul>
- <li><strong>主轴(main axis)，主轴区域(main dimension)</strong>。弹性容器的主轴指的是弹性元素主要沿着哪个方向布局。它在主轴区域中延伸。</li>
- <li><strong>主轴起点(main-Start)，主轴终点(main-end)</strong>。弹性元素被放置于容器中从主轴起点到主轴终点放置。</li>
- <li><strong>主轴尺寸(main size)，主轴尺寸属性(main size property)</strong>。一个弹性元素的主轴尺寸指的是其在主轴区域内的长度。其主轴尺寸属性指的是其对应的属性。</li>
- <li><strong>侧轴(cross axis)，侧轴区域(cross dimension)</strong>。侧轴垂直于主轴。它在侧轴区域中延伸。</li>
- <li><strong>侧轴起点(cross-Start)，侧轴终点(cross-end)</strong>。浮动行被元素填充，并且在容器中沿侧轴方向从起点向终点分布。</li>
- <li><strong>侧轴尺寸(cross size)，侧轴尺寸属性(cross size property)</strong>。一个弹性元素的侧轴尺寸指的是其在侧轴区域内的长度。其侧轴尺寸属性指的是其对应的属性</li>
-</ul>
-
-<h4 id="弹性容器属性">弹性容器属性</h4>
-
-<ul>
- <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-direction">flex-direction</a></li>
- <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-wrap">flex-wrap</a></li>
- <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-flow">flex-flow</a></li>
- <li><a href="https://css-tricks.com/almanac/properties/j/justify-content/">justify-content</a></li>
- <li><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-items</a></li>
- <li><a href="http://www.w3.org/TR/css3-flexbox/#align-content-property">align-content</a></li>
-</ul>
-
-<h4 id="弹性元素属性">弹性元素属性</h4>
-
-<ul>
- <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-order">order</a></li>
- <li><a href="http://www.w3.org/TR/css3-flexbox/#align-items-property">align-self</a></li>
- <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-grow">flex-grow</a></li>
- <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-shrink">flex-shrink</a></li>
- <li><a href="http://www.w3.org/TR/css3-flexbox/#propdef-flex-basis">flex-basis</a></li>
-</ul>
-
-<h2 id="弹性盒子混合">弹性盒子混合</h2>
-
-<p>对于希望在现代浏览器原生支持下使用弹性盒子的用户，这里有全部的支撑表格：<a href="http://caniuse.com/flexbox" style="line-height: 1.5;">http://caniuse.com/flexbox</a></p>
-
-<p>将会使用：</p>
-
-<ul>
- <li>后备、陈旧的语法（IE10，移动端WebKit内核浏览器－无包裹)</li>
- <li>最终标准的语法（FF、Safari、Chrome、IE11、Opera）</li>
-</ul>
-
-<p>启发于：</p>
-
-<ul>
- <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li>
-</ul>
-
-<p>可以从这些地方获取帮助：</p>
-
-<ul>
- <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li>
- <li><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></li>
- <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li>
- <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li>
- <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li>
- <li><a href="https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes">https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes</a></li>
-</ul>
-
-<h3 id="弹性容器">弹性容器</h3>
-
-<p>“flex”值会引起一个元素生成一个盒级的弹性盒子。</p>
-
-<p>“inline-flex”会生成一个行内弹性盒子。</p>
-
-<p>display: flex | inline-flex <a href="http://w3.org/tr/css3-flexbox/#flex-containers">http://w3.org/tr/css3-flexbox/#flex-containers</a></p>
-
-<div>
-<pre>@mixin flexbox {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-// 使用这样的混合模式
-%flexbox { @include flexbox; }</pre>
-</div>
-
-<div>
-<pre>@mixin inline-flex {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -moz-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-%inline-flex { @include inline-flex; }</pre>
-</div>
-
-<h3 id="弹性盒子方向">弹性盒子方向</h3>
-
-<p>“flex-direction”属性通过设置容器主轴来定义弹性元素如何在容器内排列。这个属性确定了弹性元素排列的方向。</p>
-
-<p>值：row | row-reverse | column | column-reverse</p>
-
-<p><a href="http://w3.org/tr/css3-flexbox/#flex-direction-property">http://w3.org/tr/css3-flexbox/#flex-direction-property</a></p>
-
-<div>
-<pre>@mixin flex-direction($value: row) {
-  @if $value == row-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: horizontal;
-  } @else if $value == column {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-  } @else if $value == column-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: vertical;
-  } @else {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-  }
-  -webkit-flex-direction: $value;
-  -moz-flex-direction: $value;
-  -ms-flex-direction: $value;
-  flex-direction: $value;
-}
-
-// 简短版本：
-@mixin flex-dir($args...) { @include flex-direction($args...); }</pre>
-</div>
-
-<h3 id="弹性盒子换行">弹性盒子换行</h3>
-
-<p>“flex-wrap”属性控制了容器为单行还是多行。并且定义了侧轴的方向，新行将沿侧轴方向堆砌。</p>
-
-<p>值：nowrap | wrap | wrap-reverse</p>
-
-<p>默认：nowrap</p>
-
-<p><a href="http://w3.org/tr/css3-flexbox/#flex-wrap-property">http://w3.org/tr/css3-flexbox/#flex-wrap-property</a></p>
-
-<div>
-<pre>@mixin flex-wrap($value: nowrap) {
-  // No Webkit Box fallback.
-  -webkit-flex-wrap: $value;
-  -moz-flex-wrap: $value;
-  @if $value == nowrap {
-    -ms-flex-wrap: none;
-  } @else {
-    -ms-flex-wrap: $value;
-  }
-  flex-wrap: $value;
-}</pre>
-</div>
-
-<h3 id="弹性盒子流（简写）">弹性盒子流（简写）</h3>
-
-<p>“flex-flow”属性是设置“flex-direction”和“flex-wrap”的简写，可以同时定义主轴和侧轴。</p>
-
-<p>默认值：row nowrap</p>
-
-<p><a href="http://w3.org/tr/css3-flexbox/#flex-flow-property">http://w3.org/tr/css3-flexbox/#flex-flow-property</a></p>
-
-<div>
-<pre>@mixin flex-flow($values: (row nowrap)) {
-  // No Webkit Box fallback.
-  -webkit-flex-flow: $values;
-  -moz-flex-flow: $values;
-  -ms-flex-flow: $values;
-  flex-flow: $values;
-}</pre>
-</div>
-
-<h3 id="弹性盒子顺序">弹性盒子顺序</h3>
-
-<p>“order”属性通过将这些元素分配到序数分组来控制它们出现的顺序。</p>
-
-<p>默认值：0</p>
-
-<p><a href="http://w3.org/tr/css3-flexbox/#order-property">http://w3.org/tr/css3-flexbox/#order-property</a></p>
-
-<div>
-<pre>@mixin order($int: 0) {
-  -webkit-box-ordinal-group: $int + 1;
-  -webkit-order: $int;
-  -moz-order: $int;
-  -ms-flex-order: $int;
-  order: $int;
-}</pre>
-</div>
-
-<h3 id="弹性盒子增长">弹性盒子增长</h3>
-
-<p>“flex-grow”属性设置增长因数，不接受负值。</p>
-
-<p>默认值：0</p>
-
-<p><a href="http://w3.org/tr/css3-flexbox/#flex-grow-property">http://w3.org/tr/css3-flexbox/#flex-grow-property</a></p>
-
-<div>
-<pre>@mixin flex-grow($int: 0) {
-  -webkit-box-flex: $int;
-  -webkit-flex-grow: $int;
-  -moz-flex-grow: $int;
-  -ms-flex-positive: $int;
-  flex-grow: $int;
-}</pre>
-</div>
-
-<h3 id="弹性盒子收缩">弹性盒子收缩</h3>
-
-<p>“flex-shrink”属性设置了收缩因数，不接受负值。</p>
-
-<p>默认值：1</p>
-
-<p><a href="http://w3.org/tr/css3-flexbox/#flex-shrink-property">http://w3.org/tr/css3-flexbox/#flex-shrink-property</a></p>
-
-<div>
-<pre>@mixin flex-shrink($int: 1) {
-  -webkit-flex-shrink: $int;
-  -moz-flex-shrink: $int;
-  -ms-flex-negative: $int;
-  flex-shrink: $int;
-}</pre>
-</div>
-
-<h3 id="弹性盒子伸缩">弹性盒子伸缩</h3>
-
-<p id="“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。"><span style="font-size: 14px; line-height: 1.5;">“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。</span></p>
-
-<p>值：类似“width”，默认值：<code>auto</code></p>
-
-<p><a href="http://www.w3.org/TR/css3-flexbox/#flex-basis-property">http://www.w3.org/TR/css3-flexbox/#flex-basis-property</a></p>
-
-<div>
-<pre>@mixin flex-basis($value: auto) {
-  -webkit-flex-basis: $value;
-  -moz-flex-basis: $value;
-  -ms-flex-preferred-size: $value;
-  flex-basis: $value;
-}</pre>
-</div>
-
-<h3 id="弹性盒子“Flex”属性（简写）">弹性盒子“Flex”属性（简写）</h3>
-
-<p>“<code>flex</code>”属性设置了弹性盒子长度的组成，包括增长因数、收缩因数和伸缩基准值。对于一个弹性元素，“<code>flex</code>”属性会被用来设置元素的尺寸，对于一个非弹性元素，该属性无效。</p>
-
-<p>值：<code>none</code> | ||</p>
-
-<p>默认值：见独立属性（1 1 0）</p>
-
-<p><a href="http://w3.org/tr/css3-flexbox/#flex-property">http://w3.org/tr/css3-flexbox/#flex-property</a></p>
-
-<div>
-<pre>@mixin flex($fg: 1, $fs: null, $fb: null) {
-
-  // Set a variable to be used by box-flex properties
-  $fg-boxflex: $fg;
-
-  // Box-Flex only supports a flex-grow value so lets grab the
-  // first item in the list and just return that.
-  @if type-of($fg) == 'list' {
-    $fg-boxflex: nth($fg, 1);
-  }
-
-  -webkit-box-flex: $fg-boxflex;
-  -webkit-flex: $fg $fs $fb;
-  -moz-box-flex: $fg-boxflex;
-  -moz-flex: $fg $fs $fb;
-  -ms-flex: $fg $fs $fb;
-  flex: $fg $fs $fb;
-}</pre>
-</div>
-
-<h3 id="弹性盒子对齐方式">弹性盒子对齐方式</h3>
-
-<p>“justify-content”属性将弹性元素沿容器主轴方向对齐。当所有弹性元素的长度和边距都设置好之后，布局完成。一般情况下，当行内所有弹性元素尺寸不可变或可变且达到最大尺寸的情况下，该属性会分配剩余可用空间。同时，当元素溢出行的时候，它也会对其排列做出控制。</p>
-
-<p>提示：以前版本的语法不支持“space-*”值。</p>
-
-<p>值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start</p>
-
-<p><a href="http://w3.org/tr/css3-flexbox/#justify-content-property">http://w3.org/tr/css3-flexbox/#justify-content-property</a></p>
-
-<div>
-<pre>@mixin justify-content($value: flex-start) {
-  @if $value == flex-start {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-  } @else if $value == flex-end {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-  } @else if $value == space-between {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-  } @else if $value == space-around {
-    -ms-flex-pack: distribute;
-  } @else {
-    -webkit-box-pack: $value;
-    -ms-flex-pack: $value;
-  }
-  -webkit-justify-content: $value;
-  -moz-justify-content: $value;
-  justify-content: $value;
-}
-  // Shorter version:
-  @mixin flex-just($args...) { @include justify-content($args...); }</pre>
-</div>
-
-<h3 id="弹性元素对齐">弹性元素对齐</h3>
-
-<p>可以设置弹性元素在容器侧轴上的对齐方式，与“justify-content”功能相似但是方向垂直。“align-items”设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，“align-self'”属性总是与“align-items”相同。）</p>
-
-<p>值：flex-start | flex-end | center | baseline | stretch 默认值：stretch</p>
-
-<p><a href="http://w3.org/tr/css3-flexbox/#align-items-property">http://w3.org/tr/css3-flexbox/#align-items-property</a></p>
-
-<div>
-<pre>@mixin align-items($value: stretch) {
-  @if $value == flex-start {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-  } @else if $value == flex-end {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-  } @else {
-    -webkit-box-align: $value;
-    -ms-flex-align: $value;
-  }
-  -webkit-align-items: $value;
-  -moz-align-items: $value;
-  align-items: $value;
-}</pre>
-</div>
-
-<h3 id="弹性元素自对齐">弹性元素自对齐</h3>
-
-<p>用来单独设置弹性元素在侧轴的对齐方式，功能与“align-items”相同。可以覆盖“align-items”属性。</p>
-
-<p>值：auto | flex-start | flex-end | center | baseline | stretch 默认值：auto</p>
-
-<div>
-<pre>@mixin align-self($value: auto) {
-  // No Webkit Box Fallback.
-  -webkit-align-self: $value;
-  -moz-align-self: $value;
-  @if $value == flex-start {
-    -ms-flex-item-align: start;
-  } @else if $value == flex-end {
-    -ms-flex-item-align: end;
-  } @else {
-    -ms-flex-item-align: $value;
-  }
-  align-self: $value;
-}</pre>
-</div>
-
-<h3 id="弹性元素内容对齐">弹性元素内容对齐</h3>
-
-<p>“align-content”属性设置了容器内每行沿侧轴的对齐方式。与“justify-content”属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效。</p>
-
-<p>值：flex-start | flex-end | center | space-between | space-around | stretch 默认值：stretch</p>
-
-<p><a href="http://w3.org/tr/css3-flexbox/#align-content-property">http://w3.org/tr/css3-flexbox/#align-content-property</a></p>
-
-<div>
-<pre>@mixin align-content($value: stretch) {
-  // No Webkit Box Fallback.
-  -webkit-align-content: $value;
-  -moz-align-content: $value;
-  @if $value == flex-start {
-    -ms-flex-line-pack: start;
-  } @else if $value == flex-end {
-    -ms-flex-line-pack: end;
-  } @else {
-    -ms-flex-line-pack: $value;
-  }
-  align-content: $value;
-}</pre>
-</div>
diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
deleted file mode 100644
index 5a26114225..0000000000
--- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
+++ /dev/null
@@ -1,409 +0,0 @@
----
-title: 使用 CSS 弹性盒子
-slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
-tags:
-  - CSS
-  - CSS Flexible Boxes
-  - Flex
-  - Web
-  - flexbox
-  - 弹性
-  - 弹性容器
-  - 弹性盒子
-  - 弹性项目
-  - 指南
-  - 盒子模型
-  - 范例
-  - 进阶
-translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
-translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
-original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
----
-<div>{{CSSRef}}</div>
-
-<p><span>CSS3 <strong>弹性盒子</strong>(<strong>Flexible Box</strong> 或 <strong>Flexbox</strong>)，是一种</span>用于在页面上布置元素的<span><a href="/zh-CN/docs/Web/CSS/Layout_mode">布局模式</a>，</span>使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，<span>弹性</span>盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。</p>
-
-<p>许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语言顺序以及基于源代码顺序的导航均不受影响。</p>
-
-<div class="note"><strong>注意：</strong> 虽然 <a href="http://www.w3.org/TR/css3-flexbox/">CSS 弹性盒子布局规范</a> 还处于最终征求意见稿 (Last Call Working Draft)阶段（参见<a href="http://dev.w3.org/csswg/css-flexbox/">最新编辑草案</a>），并非所有浏览器都实现了弹性盒子的所有功能。但，这么说吧，现在全线产品对弹性盒子都有良好支持。最新的兼容性状况可以查看每个具体属性的<a href="/zh-CN/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">兼容性表格</a>获取。</div>
-
-<h2 id="弹性盒布局概念">弹性盒布局概念</h2>
-
-<p>在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。</p>
-
-<p>块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。</p>
-
-<h2 id="弹性盒布局相关词汇">弹性盒布局相关词汇</h2>
-
-<p>关于弹性盒子的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个 <code>flex-direction</code> 属性为 <code>row</code>的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。</p>
-
-<p><img alt="弹性布局相关名词" src="https://mdn.mozillademos.org/files/12998/flexbox.png" style="height: 333px; width: 563px;"></p>
-
-<dl>
- <dt>弹性容器(Flex container)</dt>
- <dd>包含着弹性项目的父元素。通过设置 {{Cssxref("display")}} 属性的值为 <code>flex</code> 或 <code>inline-flex</code> 来定义弹性容器。</dd>
- <dt>弹性项目(Flex item)</dt>
- <dd>
- <p>弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。</p>
- </dd>
- <dt>轴(Axis)</dt>
- <dd>
- <p>每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为<strong>主轴(main axis)</strong>。垂直于<strong>主轴</strong>的那根轴称为<strong>侧轴(cross axis)</strong>。</p>
-
- <ul>
-  <li><code><a href="/zh-CN/docs/Web/CSS/flex-direction">flex-direction</a></code> 确立主轴。</li>
-  <li><a href="/zh-CN/docs/Web/CSS/justify-content"><code>justify-content</code></a> 定义了在当前行上，弹性项目沿主轴如何排布。</li>
-  <li><a href="/zh-CN/docs/Web/CSS/align-items"><code>align-items</code></a> 定义了在当前行上，弹性项目沿侧轴默认如何排布。</li>
-  <li><a href="/zh-CN/docs/Web/CSS/align-self"><code>align-self</code></a> 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 <code>align-items</code> 所确立的默认值。</li>
- </ul>
- </dd>
- <dt>方向(Direction)</dt>
- <dd>
- <p>弹性容器的<strong>主轴起点(main start)</strong>/<strong>主轴终点(main end)</strong>和<strong>侧轴起点(cross start)</strong>/<strong>侧轴终点(cross end)</strong>描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 <code>writing-mode</code> 确立的方向（从左到右、从右到左，等等）。</p>
-
- <ul>
-  <li><a href="/zh-CN/docs/Web/CSS/order"><code>order</code></a> 属性将元素与序号关联起来，以此决定哪些元素先出现。</li>
-  <li><a href="/zh-CN/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> 属性是 <a href="/zh-CN/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> 和 <a href="/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性的简写，决定弹性项目如何排布。</li>
- </ul>
- </dd>
- <dt>行(Line)</dt>
- <dd>
- <p>根据 <a href="/zh-CN/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。</p>
- </dd>
- <dt>尺寸(Dimension)</dt>
- <dd>
- <p>根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为<strong>主轴尺寸(main size)</strong> ，对应侧轴的称为 <strong>侧轴尺寸(cross size)</strong>。</p>
-
- <ul>
-  <li><code><a href="/zh-CN/docs/Web/CSS/min-height">min-height</a></code> 与 <code><a href="/zh-CN/docs/Web/CSS/min-width">min-width</a></code> 属性初始值将为 0。</li>
-  <li><a href="/zh-CN/docs/Web/CSS/flex"><code>flex</code></a> 属性是 <a href="/zh-CN/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>、<a href="/zh-CN/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a> 和 <a href="/zh-CN/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> 属性的简写，描述弹性项目的整体的伸缩性。</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="定义一个弹性盒子">定义一个弹性盒子</h2>
-
-<p>为要使用此样式的元素指派 CSS，需按以下方式设置 <a href="/zh-CN/docs/Web/CSS/display">display</a> 属性：</p>
-
-<pre class="brush: css">display : flex</pre>
-
-<p>或者</p>
-
-<pre class="brush: css">display : inline-flex</pre>
-
-<p>这样做将元素定义为弹性容器，其子元素则成为弹性项目。值 <code>flex</code> 使弹性容器成为块级元素。值 <code>inline-flex</code> 使弹性容器成为单个不可分的行内级元素。</p>
-
-<div class="note"><strong>注意：</strong>厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：<code>display : -webkit-flex</code>。</div>
-
-<h2 id="弹性项目须知">弹性项目须知</h2>
-
-<p>弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，一个只包含一系列空白符（如一堆空格或制表符等）的匿名弹性项目不会被渲染，就如同对其指派 <code>display: none</code>。</p>
-
-<p>对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。</p>
-
-<p>相邻的弹性元素其外边距不会互相合并。使用 <code>auto</code> 外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的 <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a>。</p>
-
-<p>不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题更会出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对这种需要居中的弹性项目，不使用 <code>align-</code> 属性，而使用自动外边距就能解决这个问题。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用，也可以使用自动外边距来替代 <code>justify-</code> 属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过很不幸，如果尝试在多行的弹性框中用基于外边距的居中方法来替代 <code>justify-content</code>，就必须对每一行的第一个和最后一个弹性项目应用外边距。此时除非能够事先预测每一行都结束于哪个元素，否则就不能愉快的在主轴方向上用基于外边距的居中方法来替代 <code>justify-content</code> 属性了。</p>
-
-<p>再强调一遍，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。{{cssxref("order")}} 属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。</p>
-
-<h2 id="弹性盒子相关属性">弹性盒子相关属性</h2>
-
-<h3 id="不影响弹性盒子的属性">不影响弹性盒子的属性</h3>
-
-<p>由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：</p>
-
-<ul>
- <li><a href="/zh-CN/docs/Web/CSS/Using_CSS_multi-column_layouts">多栏布局模块</a>的 <code>column-*</code> 属性对弹性项目无效。</li>
- <li>{{cssxref("float")}} 与 {{cssxref("clear")}} 对弹性项目无效。使用 <code>float</code> 将使元素的 <code>display</code> 属性计为<code>block</code>。</li>
- <li>{{cssxref("vertical-align")}} 对弹性项目的对齐无效。</li>
-</ul>
-
-<h2 id="示例">示例</h2>
-
-<h3 id="基本的弹性布局示例">基本的弹性布局示例</h3>
-
-<p>这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。</p>
-
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
-
-   <span class="selector token"><span class="class token">.flex</span>
-   </span><span class="punctuation token">{</span>
-      <span class="comment token">/* 基本样式 */</span>
-      <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">350</span>px<span class="punctuation token">;</span>
-      <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span>
-      <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#555</span><span class="punctuation token">;</span>
-      <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">14</span>px Arial<span class="punctuation token">;</span>
-
-      <span class="comment token">/*  建立弹性框 */</span>
-      <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span>
-      <span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span>
-
-      <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
-      <span class="property token">flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-
-   <span class="selector token"><span class="class token">.flex</span> &gt; div
-   </span><span class="punctuation token">{</span>
-      <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">1</span> auto<span class="punctuation token">;</span>
-      <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">1</span> auto<span class="punctuation token">;</span>
-
-      <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">30</span>px<span class="punctuation token">;</span> <span class="comment token">/* 让过渡表现良好。（从/到"width:auto"的过渡
-                      至少在 Gecko 和 Webkit 上是有 bug 的。
-                      更多信息参见 http://bugzil.la/731886 ） */</span>
-
-      <span class="property token">-webkit-transition</span><span class="punctuation token">:</span> width <span class="number token">0.7</span>s ease-out<span class="punctuation token">;</span>
-      <span class="property token">transition</span><span class="punctuation token">:</span> width <span class="number token">0.7</span>s ease-out<span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-
-   <span class="comment token">/* colors */</span>
-   <span class="selector token"><span class="class token">.flex</span> &gt; div<span class="pseudo-class token">:nth-child(1)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#009246</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
-   <span class="selector token"><span class="class token">.flex</span> &gt; div<span class="pseudo-class token">:nth-child(2)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#F1F2F1</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
-   <span class="selector token"><span class="class token">.flex</span> &gt; div<span class="pseudo-class token">:nth-child(3)</span></span><span class="punctuation token">{</span> <span class="property token">background</span> <span class="punctuation token">:</span> <span class="hexcode token">#CE2B37</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
-
-   <span class="selector token"><span class="class token">.flex</span> &gt; div<span class="pseudo-class token">:hover</span>
-   </span><span class="punctuation token">{</span>
-        <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-
-   </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
-
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Flexbox nuovo<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flex<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>uno<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>due<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>tre<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
-
-<h3 id="圣杯布局示例">圣杯布局示例</h3>
-
-<p>此示例展示了弹性盒子根据不同屏幕分辨率动态改变布局的能力。下图说明了这种转换。</p>
-
-<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
-
-<p>这里展示的正是针对浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减，其呈现顺序也需要改变。弹性盒子让这变得很简单。</p>
-
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
-
-  <span class="selector token">body </span><span class="punctuation token">{</span>
-   <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">24</span>px Helvetica<span class="punctuation token">;</span>
-   <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#999999</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span>
-
-  <span class="selector token"><span class="id token">#main</span> </span><span class="punctuation token">{</span>
-   <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">800</span>px<span class="punctuation token">;</span>
-   <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span>px<span class="punctuation token">;</span>
-   <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span>px<span class="punctuation token">;</span>
-   <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span>
-   <span class="property token">display</span><span class="punctuation token">:</span>         flex<span class="punctuation token">;</span>
-   <span class="property token">-webkit-flex-flow</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span>
-           <span class="property token">flex-flow</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-
-  <span class="selector token"><span class="id token">#main</span> &gt; article </span><span class="punctuation token">{</span>
-   <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span>
-   <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span>
-   <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#cccc33</span><span class="punctuation token">;</span>
-   <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span>
-   <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#dddd88</span><span class="punctuation token">;</span>
-   <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">3</span> <span class="number token">1</span> <span class="number token">60%</span><span class="punctuation token">;</span>
-           <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">3</span> <span class="number token">1</span> <span class="number token">60%</span><span class="punctuation token">;</span>
-   <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span>
-           <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-
-  <span class="selector token"><span class="id token">#main</span> &gt; nav </span><span class="punctuation token">{</span>
-   <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span>
-   <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span>
-   <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#8888bb</span><span class="punctuation token">;</span>
-   <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span>
-   <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ccccff</span><span class="punctuation token">;</span>
-   <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span>
-           <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span>
-   <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span>
-           <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-
-  <span class="selector token"><span class="id token">#main</span> &gt; aside </span><span class="punctuation token">{</span>
-   <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span>
-   <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span>
-   <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#8888bb</span><span class="punctuation token">;</span>
-   <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span>
-   <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ccccff</span><span class="punctuation token">;</span>
-   <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span>
-           <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span> <span class="number token">6</span> <span class="number token">20%</span><span class="punctuation token">;</span>
-   <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>
-           <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-
-  <span class="selector token">header, footer </span><span class="punctuation token">{</span>
-   <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span>
-   <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span>px<span class="punctuation token">;</span>
-   <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span>
-   <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span>
-   <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#eebb55</span><span class="punctuation token">;</span>
-   <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">7</span>pt<span class="punctuation token">;</span>
-   <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#ffeebb</span><span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-
-  <span class="comment token">/* 窄到已不足以支持三栏 */</span>
-  <span class="atrule token"><span class="rule token">@media</span> all and <span class="punctuation token">(</span><span class="property token">max-width</span><span class="punctuation token">:</span> 640px<span class="punctuation token">)</span></span> <span class="punctuation token">{</span>
-
-   <span class="selector token"><span class="id token">#main</span>, <span class="id token">#page</span> </span><span class="punctuation token">{</span>
-    <span class="property token">-webkit-flex-flow</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span>
-            <span class="property token">flex-direction</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-
-   <span class="selector token"><span class="id token">#main</span> &gt; article, <span class="id token">#main</span> &gt; nav, <span class="id token">#main</span> &gt; aside </span><span class="punctuation token">{</span>
-    <span class="comment token">/* 恢复到文档内的自然顺序 */</span>
-    <span class="property token">-webkit-order</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
-            <span class="property token">order</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-
-   <span class="selector token"><span class="id token">#main</span> &gt; nav, <span class="id token">#main</span> &gt; aside, header, footer </span><span class="punctuation token">{</span>
-    <span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span>
-    <span class="property token">max-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span>
-   <span class="punctuation token">}</span>
-  <span class="punctuation token">}</span>
-
- </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>header</span><span class="punctuation token">&gt;</span></span>header<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>header</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>main<span class="punctuation token">'</span></span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>article</span><span class="punctuation token">&gt;</span></span>article<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>article</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>nav</span><span class="punctuation token">&gt;</span></span>nav<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>nav</span><span class="punctuation token">&gt;</span></span>
-    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>aside</span><span class="punctuation token">&gt;</span></span>aside<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>aside</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
- <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>footer</span><span class="punctuation token">&gt;</span></span>footer<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>footer</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
-
-<h2 id="试验场地">试验场地</h2>
-
-<p>有几个在线弹性盒子试验场地可供进行各种实验：</p>
-
-<ul>
- <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
- <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
- <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li>
-</ul>
-
-<h2 id="务必牢记">务必牢记</h2>
-
-<p>描述弹性项目如何排布的算法有时会极其棘手。在使用弹性盒子进行设计时，请考虑以下几点，以免碰到不好的意料外状况。</p>
-
-<p>弹性盒子的排布与<a href="https://developer.mozilla.org/zh-CN/docs/CSS/writing-mode">书写模式</a>是一致的，这意味着排布的<strong>主轴起点</strong>和<strong>主轴终点</strong>根据的是<strong>开始</strong>与<strong>结束</strong>的位置。</p>
-
-<p><strong>侧轴起点</strong>与<strong>侧轴终点</strong>依赖于<strong>开始</strong>或<strong>前面（before）</strong>的位置定义，而这个“<strong>前面”</strong>依赖于 <a href="/zh-CN/docs/Web/CSS/direction"><code>direction</code></a> 的值。</p>
-
-<p>只要 <code>break-</code> 属性的设置值允许，在弹性框布局中是可以存在分页的。CSS3 中的 <code>break-after</code>、<code>break-before</code> 和 <code>break-inside</code>，以及 CSS 2.1 中的 <code>page-break-before</code>、<code>page-break-after</code> 和 <code>page-break-inside</code> 属性在弹性容器上、弹性项目上和弹性项目内均可以使用。</p>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>特性</th>
-   <th>Firefox (Gecko)</th>
-   <th>Chrome</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>基础支持（单行弹性框）</td>
-   <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br>
-    {{CompatGeckoDesktop("22.0")}}</td>
-   <td>21.0{{property_prefix("-webkit")}}<br>
-    29.0</td>
-   <td>11<sup>[3]</sup></td>
-   <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
-   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
-  </tr>
-  <tr>
-   <td>多行弹性框</td>
-   <td>{{CompatGeckoDesktop("28.0")}}</td>
-   <td>21.0{{property_prefix("-webkit")}}<br>
-    29.0</td>
-   <td>11<sup>[3]</sup></td>
-   <td>12.10<sup>[5]</sup><br>
-    15 {{property_prefix("-webkit")}}</td>
-   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>特性</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>Firefox OS</th>
-   <th>Android</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>基础支持（单行弹性框）</td>
-   <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
-    {{CompatGeckoMobile("22.0")}}</td>
-   <td>
-    <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br>
-     1.1</p>
-   </td>
-   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
-    4.4</td>
-   <td>11</td>
-   <td>12.10<sup>[5]</sup><br>
-    15{{property_prefix("-webkit")}}</td>
-   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
-  </tr>
-  <tr>
-   <td>多行弹性框</td>
-   <td>{{CompatGeckoMobile("28.0")}}</td>
-   <td>1.3</td>
-   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
-    4.4</td>
-   <td>11</td>
-   <td>12.10<sup>[5]</sup><br>
-    15{{property_prefix("-webkit")}}</td>
-   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Safari 在版本 6.0 (iOS.1)以前支持的是规范的一个与现有版本不兼容的旧版草案。Safari 6.1（以及 iOS 7 上的 Safari）已更新为支持最终版本。</p>
-
-<p>[2] 直到 Firefox 22 为止，用户必须修改 <code>about:config</code> 设置，将 <code>layout.css.flexbox.enabled</code> 改为 <code>true</code> 才能激活对弹性盒子的支持。从 Firefox 22 到 Firefox 27，此设置项默认为 <code>true</code>，而 Firefox 28 中取消了此设置项。</p>
-
-<p>[3] Internet Explorer 10 支持的是规范的一个与现有版本不兼容的旧版草案；Internet Explorer 11 <a href="http://msdn.microsoft.com/zh-CN/library/ie/dn265027%28v=vs.85%29.aspx"> 已更新为 </a> 支持最终版本。</p>
-
-<p>[4] Android 浏览器直到 4.3 为止支持的是规范的一个与现有版本不兼容的旧版草案。Android 4.4 已更新为支持最终版本。</p>
-
-<p>[5] 在 Opera 12.10 的<code>弹性盒子</code>初始实现中是没有前缀的，但 Opera 版本 15 到 16 和 Opera Mobile 的 15 到 19 需要 {{property_prefix("-webkit")}}. 在 Opera 17 及 Opera Mobile 24 中再次取消了前缀。</p>
-
-<p>[6] 直到 Firefox 29 为止，在弹性项目上指定 <code>visibility: collapse</code> 将使其被视为 <code>display: none</code> 处理，而预期的行为是被视为 <code>visibility: hidden</code>。建议的处理方式是在弹性项目上使用 <code>visibility:hidden</code>，这样其行为应当与指派了 <code>visibility:collapse</code> 一致。更多信息，参考 {{bug(783470)}}.</p>
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li>各浏览器对弹性盒子的实现中的 bug 的信息，请参考 <a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a>。</li>
-</ul>
diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
deleted file mode 100644
index 416b96e007..0000000000
--- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
+++ /dev/null
@@ -1,188 +0,0 @@
----
-title: 使用flexbox来布局web应用
-slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
-tags:
-  - CSS
-  - 弹性盒子
-translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
-translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications
-original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications
----
-<p>{{CSSRef}}</p>
-
-<p>使用 <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> 可以帮助你设计出引人注目的布局，并且在pc端或移动端能够很好的缩放。告别使用浮动的 {{HTMLElement("div")}} 元素、<a href="/en-US/docs/Web/CSS/position#Absolute_positioning">绝对定位</a> 和一些JavaScript hacks, 使用仅仅几行 <a href="/en-US/docs/Web/CSS">CSS</a> 就可以构建出水平或垂直方向的布局。下面是一些基本的使用案例：</p>
-
-<ul>
- <li>你想要将一个元素放在页面的中间</li>
- <li>你想要一组在垂直方向可以一个紧挨一个的布局容器</li>
- <li>你像要创建一行按钮或者其它元素，这些元素在小屏幕中可以垂直折叠</li>
-</ul>
-
-<p>这篇文章只囊括了在不使用前缀就可以支持现行标准的浏览器下如何使用 <em>flexbox</em> 的相关信息。 想了解更多关于带有供应商前缀的老版本浏览器的资料，请点击这里 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">the more general guide to using CSS flexible boxes</a>.</p>
-
-<h2 id="基础">基础</h2>
-
-<p>如果你想让元素呈水平或柱状，或如果你想让元素垂直布局，在任何 {{HTMLElement("div")}} 元素中，通过设置 {{cssxref("display")}} 属性为 flex 来使用flexbox，然后设置它任意一行的 {{cssxref("flex-flow")}} <font face="Consolas, Liberation Mono, Courier, monospace">属性</font>, 你就可以在其中尽情的创建元素了。如果你正在使用水平的 flexbox，并想让你的内容垂直换行，只需指定值为wrap。</p>
-
-<p>接下来，只要你想让某个元素使用弹性布局，就为它添加 {{cssxref("flex")}} 属性。一般情况下，你将会使用下列三个值之一：</p>
-
-<ul>
- <li>如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置 <code>flex: none</code>，none 将会被解释为 <code>0 0 auto</code>.</li>
- <li>如果想要一个固定大小的元素，则设置 <code>flex: 0 0 <em>size。</em></code>如：<code>flex 0 0 60px。</code></li>
- <li>如果你想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置 <code>flex: auto，它代表</code> <code>1 1 auto</code>.</li>
-</ul>
-
-<p>有可能还有使用方法，但是这应该囊括了最基本的使用案例。让我们用几个例子来看看如何使用。</p>
-
-<h2 id="示例_1_在页面中把一个元素居中">示例 1: 在页面中把一个元素居中</h2>
-
-<p>在这个例子中，要做的最简单的事情就是创建两个 flexbox，其中一个在另一个中。每个 flexbox 有三个元素：其中两个当作中间元素的垫子，另一个就是中间元素本身。</p>
-
-<h3 id="CSS_内容">CSS 内容</h3>
-
-<pre class="brush: css;">.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.horizontal-box {
-  display: flex;
-  flex-flow: row;
-}
-.spacer {
-  flex: auto;
-  background-color: black;
-}
-.centered-element {
-  flex: none;
-  background-color: white;
-}
-</pre>
-
-<h3 id="HTML_内容">HTML 内容</h3>
-
-<pre class="brush: html;">&lt;div class="vertical-box"&gt;
-  &lt;div class="spacer"&gt;&lt;/div&gt;
-  &lt;div class="centered-element horizontal-box"&gt;
-    &lt;div class="spacer"&gt;&lt;/div&gt;
-    &lt;div class="centered-element"&gt;Centered content&lt;/div&gt;
-     &lt;div class="spacer"&gt;&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="spacer"&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="结果">结果</h3>
-
-<p>{{ EmbedLiveSample('示例_1_在页面中把一个元素居中', 500, 500) }}</p>
-
-<h2 id="示例2_垂直放置一系列的容器">示例2: 垂直放置一系列的容器</h2>
-
-<p>假设你有一个带有头部区域，内容区域，和底部区域的页面。头部和底部应该有一个固定的尺寸，但是内容区域应该根据可以利用的空间来缩放。这可以通过设置内容区域的 {{cssxref("flex")}} 属性，设置头部区域 {{cssxref("flex")}} 属性，底部区域不设置来实现自动扩展功能。</p>
-
-<h3 id="CSS_内容_2">CSS 内容</h3>
-
-<pre class="brush: css;highlight:[8,14,18]">.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.fixed-size {
-  flex: none;
-  height: 30px;
-  background-color: black;
-  text-align: center;
-}
-.flexible-size {
-  flex: auto;
-  background-color: white;
-}
-</pre>
-
-<h3 id="HTML_内容_2">HTML 内容</h3>
-
-<pre class="brush: html;">&lt;div id="document" class="vertical-box"&gt;
-  &lt;div class="fixed-size"&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;/div&gt;
-  &lt;div id="flexible-content" class="flexible-size"&gt;&lt;/div&gt;
-  &lt;div class="fixed-size"&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Javascript_内容">Javascript 内容</h3>
-
-<pre class="brush: js;">var height = 400;
-document.getElementById('increase-size').onclick=function() {
-  height += 10;
-  if (height &gt; 500) height = 500;
-  document.getElementById('document').style.height = (height + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  height -= 10;
-  if (height &lt; 300) height = 300;
-  document.getElementById('document').style.height = (height + "px");
-}</pre>
-
-<h3 id="结果_2">结果</h3>
-
-<p>{{ EmbedLiveSample('示例2_垂直放置一系列的容器', 500, 500) }}</p>
-
-<p>这个例子已经设定好了，可以通过点击头部来增加尺寸，通过点击底部来减小尺寸。仔细观察在保持头部和底部尺寸不变的情况下，内容区域是如何自动缩放的。</p>
-
-<h2 id="示例3_创建一个水平折叠的容器">示例3: 创建一个水平折叠的容器</h2>
-
-<p>在某些时候，你可能想让一些信息在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。这对 flexbox 来讲太容易实现了。你通过设置 {{cssxref("flex-flow")}} 的值为 wrap 来实现。</p>
-
-<h3 id="CSS_内容_3">CSS 内容</h3>
-
-<pre class="brush: css;highlight:[4]">.horizontal-container {
-  display: flex;
-  width: 300px;
-  flex-flow: row wrap;
-}
-.fixed-size {
-  flex: none;
-  width: 100px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-</pre>
-
-<h3 id="HTML_内容_3">HTML 内容</h3>
-
-<pre class="brush: html;">&lt;div id="container" class="horizontal-container"&gt;
-  &lt;div class="fixed-size"&gt;Element 1&lt;/div&gt;
-  &lt;div class="fixed-size"&gt;Element 2&lt;/div&gt;
-  &lt;div class="fixed-size"&gt;Element 3&lt;/div&gt;
-&lt;/div&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;
-</pre>
-
-<h3 id="Javascript_内容_2">Javascript 内容</h3>
-
-<pre class="brush: js;">var width = 300;
-
-document.getElementById('increase-size').onclick=function() {
-  width += 100;
-  if (width &gt; 300) width = 300;
-  document.getElementById('container').style.width = (width + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  width -= 100;
-  if (width &lt; 100) width = 100;
-  document.getElementById('container').style.width = (width + "px");
-}
-</pre>
-
-<h3 id="结果_3">结果</h3>
-
-<p>{{ EmbedLiveSample('示例3_创建一个水平折叠的容器', 500, 200) }}</p>
-
-<h2 id="参考">参考</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
-</ul>
diff --git a/files/zh-cn/conflicting/web/css/easing-function/index.html b/files/zh-cn/conflicting/web/css/easing-function/index.html
deleted file mode 100644
index 1e53f47c6d..0000000000
--- a/files/zh-cn/conflicting/web/css/easing-function/index.html
+++ /dev/null
@@ -1,267 +0,0 @@
----
-title: <timing-function>
-slug: conflicting/Web/CSS/easing-function
-tags:
-  - CSS
-  - timing-function
-translation_of: Web/CSS/easing-function
-translation_of_original: Web/CSS/timing-function
-original_slug: Web/CSS/timing-function
----
-<p>{{ CSSRef() }}</p>
-
-<p><span style="font-family: consolas,monaco,andale mono,monospace; font-size: 14.4444446563721px; line-height: 23.3333339691162px;"><code><strong>&lt;timing-function&gt;</strong></code> </span><a href="/zh-CN/CSS" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;" title="CSS">CSS</a> 数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变。这些函数通常被称为缓动函数。</p>
-
-<p>这是一个表示时间输出比率的函数，表示为{{cssxref("&lt;number&gt;")}}，<code>0, 0</code> 代表初始状态，<code>1, 1 </code>代表终止状态。</p>
-
-<p><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 171px; width: 129px;"><img alt="" src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">输出比可以大于1.0（或者小于0.0）。这是因为在一种反弹效果中，动画是可以比最后的状态<span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">走的</span>更远的，然后再回到最终状态。</p>
-
-<p>不过，如果输出值超过了它允许的范围，比如组成一个颜色的值大于了255或者小于了0，这个值会被修改为允许范围内的最接近的值（在颜色值这个例子中分别为255和0）。一些贝塞尔曲线展示了这些性质。</p>
-
-<h2 class="cleared" id="定时函数">定时函数</h2>
-
-<div style="width: 100%;">
-<p>CSS 支持两种定时函数：立方贝塞尔曲线的子集和阶梯函数。这些函数中最有用的是一个关键字，可以很容易地引用它们。</p>
-
-<h3 id="cubic-bezier_定时函数"><code>cubic-bezier()</code> 定时函数</h3>
-
-<table class="withoutBorder">
- <tbody>
-  <tr>
-   <td>
-    <p><img alt="" class="internal lwrap" src="/files/3433/cubic-bezier,%20example.png" style="float: left;"></p>
-   </td>
-   <td>
-    <p><code>cubic-bezier()</code> 定义了一条 <a class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves">立方贝塞尔曲线（cubic Bézier curve）</a>。这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（<em>easing functions</em>）。</p>
-
-    <p>一条立方贝塞尔曲线需要四个点来定义，P<sub>0</sub> 、P<sub>1</sub> 、P<sub>2</sub> 和 P<sub>3</sub>。P<sub>0</sub> 和 P<sub>3</sub> 是起点和终点，这两个点被作为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。P<sub>0</sub> 是 <code>(0, 0)，表示初始时间和初始状态。</code>P<sub>3</sub> 是 <code>(1, 1)</code> ，表示终止时间和终止状态。</p>
-
-    <p>并非所有的三次贝塞尔曲线都适合作为计时函数，也并非所有的曲线都是数学函数，即给定横坐标为0或1的曲线。在CSS定义的P0和P3固定的情况下，三次贝塞尔曲线是一个函数，因此，当且仅当P1和P2的横坐标都在[0,1]范围内时，三次贝塞尔曲线是有效的。</p>
-
-    <p>三次贝塞尔曲线的 P<sub>1</sub>或 P<sub>2</sub>坐标超出<code>[0, 1]</code> 范围可能会产生弹跳效果。</p>
-
-    <p>当指定的三次贝塞尔曲线无效时，CSS将忽略整个属性。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h4 id="语法">语法</h4>
-
-<pre><code>cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>)</code>
-</pre>
-
-<p>其中，</p>
-
-<dl>
- <dt style="margin-left: 40px;"><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2是&lt;number&gt;类型的值，它们代表当前定义立方贝塞尔曲线中的</sub></em></strong>P<sub>1</sub> 和 P<sub>2点的横坐标和纵坐标，X1和X2必须在[0，1]范围内，否则当前值无效。</sub></dt>
- <dd style="margin-left: 40px;">Are {{cssxref("&lt;number&gt;")}} values representing the abscissas and ordinates of the P<sub>1</sub> and P<sub>2</sub> points defining the cubic Bézier curve. x<sub>1</sub> and x<sub>2</sub> must be in the range [0, 1] or the value is invalid.</dd>
-</dl>
-
-<h4 id="示例">示例</h4>
-
-<p><code>CSS</code> 中允许使用这些贝塞尔曲线：</p>
-
-<pre><code>cubic-bezier(0.1, 0.7, 1.0, 0.1)   </code>The canonical Bézier curve with four &lt;number&gt; in the [0,1] range.
-cubic-bezier(0, 0, 1, 1)           Using &lt;integer&gt; is valid as any &lt;integer&gt; is also a &lt;number&gt;.
-cubic-bezier(0.3, -1.9, 2.1, -0.2) Negative values for ordinates are valid, leading to bouncing effects.
-cubic-bezier(0.1, 4, 0.6, 2.45)    Values &gt; 1.0 for ordinates are also valid.</pre>
-
-<p>像这些贝塞尔曲线的定义是无效的：</p>
-
-<pre>cubic-bezier(0.1, red, 1.0, green) Though the animated output type may be a color, Bézier curves work w/ numerical ratios.
-cubic-bezier(-0.2, 0.6, -0.1, 0)   Abscissas must be in the [0, 1] range or the curve is not a function of time.
-cubic-bezier(0.3, 2.1)             The two points must be defined, there is no default value.
-cubic-bezier(1.1, 0, 4, 0)         Abscissas must be in the [0, 1] range or the curve is not a function of time.
-</pre>
-
-<h3 id="The_steps_class_of_timing-functions">The <code>steps()</code> class of timing-functions</h3>
-
-<table class="withoutBorder">
- <tbody>
-  <tr>
-   <td><img alt="" src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></td>
-   <td><img alt="" src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;">
-    <table class="withoutBorder">
-     <tbody>
-      <tr>
-       <td></td>
-       <td rowspan="2">
-        <p><code>steps()</code> 定义了一个以等距步长划分值域的步长函数。这个阶跃函数的子类有时也称为阶梯函数。</p>
-       </td>
-      </tr>
-     </tbody>
-    </table>
-   </td>
-   <td rowspan="2"></td>
-  </tr>
-  <tr style="text-align: center;">
-   <td style="white-space: nowrap;"><code>steps(2, start)</code></td>
-   <td><code>steps(4, end)</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Syntax">Syntax</h4>
-
-<pre><code>steps(<em>number_of_steps</em>, <em>direction</em>)</code>
-</pre>
-
-<p>where :</p>
-
-<dl>
- <dt style="margin-left: 40px;"><strong><em>number_of_steps</em></strong></dt>
- <dd style="margin-left: 40px;">Is a strictly positive {{cssxref("&lt;integer&gt;")}} representing the amount of equidistant treads composing the stepping function.</dd>
- <dt style="margin-left: 40px;"><strong><em>direction</em></strong></dt>
- <dd style="margin-left: 40px;">Is a keyword indicating if it the function is <a class="external" href="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity" title="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity">left- or right-continuous</a>:
- <ul>
-  <li style="margin-left: 40px;"><code>start</code> denotes a left-continuous function, so that the first step happens when the animation begins;</li>
-  <li style="margin-left: 40px;"><code>end</code> denotes a right-continuous function, so that the last step happens when the animation ends.</li>
- </ul>
- </dd>
-</dl>
-
-<h4 id="Examples">Examples</h4>
-
-<p>These timing functions are valid :</p>
-
-<pre>steps(5, end)          There is 5 treads, the last one happens right before the end of the animation.
-steps(2, start)        A two-step staircase, the first one happening at the start of the animation.
-</pre>
-
-<p>These timing function are invalid :</p>
-
-<pre>steps(2.0, end)        The first parameter must be an <a title="integer">&lt;integer&gt;</a> and cannot be a real value, even if it is equal to one.
-steps(-3, start)       The amount of steps must be non-negative.
-steps(0, end)          There must be at least one step.
-steps(2)               The second parameter is not optional.
-steps(start, 3)        Though of different types, the order of parameter is important.
-step(1, end)           Even if there is one step, the function name is steps, with the plural 's'
-steps(3 end)           The two parameters must be separated with a comma; one or several spaces is not enough.
-</pre>
-
-<h3 id="常用定时函数关键字">常用定时函数关键字</h3>
-
-<h4 id="linear"><code>linear</code></h4>
-
-<table class="withoutBorder">
- <tbody>
-  <tr style="vertical-align: top;">
-   <td><img alt="" src="/files/3425/cubic-bezier,linear.png" style="height: 332px; width: 249px;"></td>
-   <td>
-    <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>。使用这个定时函数，动画会以恒定的速度从初始状态过渡到结束状态。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="ease"><code>ease</code></h4>
-
-<table class="withoutBorder">
- <tbody>
-  <tr style="vertical-align: top;">
-   <td><img alt="" src="/files/3429/cubic-bezier,ease.png" style="height: 332px; width: 244px;"></td>
-   <td>此关键字表示定时函数 <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>。 这个函数类似于 <a href="/zh-CN/CSS/timing-function#ease-in-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in-out"><code>ease-in-out</code></a>， 尽管它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。</td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="ease-in"><code>ease-in</code></h4>
-
-<table class="withoutBorder">
- <tbody>
-  <tr style="vertical-align: top;">
-   <td><img alt="" src="/files/3426/cubic-bezier,ease-in.png" style="height: 332px; width: 249px;"></td>
-   <td>
-    <p>此关键字表示定时函数<code>cubic-bezier(</code><code>0.42, 0.0, 1.0, 1.0</code><code>)</code>。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="ease-in-out"><code>ease-in-out</code></h4>
-
-<table class="withoutBorder">
- <tbody>
-  <tr style="vertical-align: top;">
-   <td><img alt="" src="/files/3428/cubic-bezier,ease-in-out.png" style="height: 332px; width: 244px;"></td>
-   <td>
-    <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>。使用这个定时函数，动画开始的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-in" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-in"><code>ease-in</code></a> 函数，动画结束时的行为类似于 <a href="/zh-CN/CSS/timing-function#ease-out" title="https://developer.mozilla.org/zh-CN/CSS/timing-function#ease-out"><code>ease-out</code></a>函数。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="ease-out"><code>ease-out</code></h4>
-
-<table class="withoutBorder">
- <tbody>
-  <tr style="vertical-align: top;">
-   <td><img alt="" src="/files/3427/cubic-bezer,ease-out.png" style="height: 332px; width: 249px;"></td>
-   <td>
-    <p>此关键字表示定时函数 <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>。动画开始很快，然后逐渐减慢，直到最终状态。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="step-start"><code>step-start</code></h4>
-
-<table class="withoutBorder">
- <tbody>
-  <tr>
-   <td><img alt="" src="/files/3423/steps(1,start).png" style="height: 332px; width: 248px;">此关键字表示定时函数 <code>steps(1, start)</code>。使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="step-end"><code>step-end</code></h4>
-
-<table class="withoutBorder">
- <tbody>
-  <tr style="vertical-align: top;">
-   <td><img alt="" src="/files/3424/steps(1,end).png" style="height: 332px; width: 248px;"></td>
-   <td>
-    <p>此关键字表示定时函数 <code>steps(1, end)</code>。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function', '&lt;timing-function&gt;') }}</td>
-   <td>{{ Spec2('CSS3 Transitions') }}</td>
-   <td>Defined anonymously</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS3 Animations', '#animation-timing-function', '&lt;timing-function&gt;') }}</td>
-   <td>{{ Spec2('CSS3 Animations') }}</td>
-   <td>Defined anonymously, says to see definition in the CSS Transitions Module</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-<p>{{Compat("css.types.timing-function", 2)}}</p>
-
-<h2 id="相关链接">相关链接</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a></li>
- <li><a href="http://cubic-bezier.com/">cubic-bezier</a></li>
-</ul>
author	Peter Bengtsson <mail@peterbe.com>	2021-07-16 16:27:00 -0400
committer	GitHub <noreply@github.com>	2021-07-17 04:27:00 +0800
commit	b9afb23d12dcae1e09f8d04c72143c5ddaa34aea (patch)
tree	f6c20844119bcaf0131ad4a037e0245577927f2c /files/zh-cn/conflicting/web/css
parent	1aa671566c3a990ec2df9a46137471d624b6f7ff (diff)
download	translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.tar.gz translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.tar.bz2 translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.zip