initial commit

1 files changed, 236 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/overflow/index.html b/files/zh-cn/web/css/overflow/index.html
new file mode 100644
index 0000000000..40edff75c2
--- /dev/null
+++ b/files/zh-cn/web/css/overflow/index.html
@@ -0,0 +1,236 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - CSS_参考
+  - Layout
+  - NeedsEditorialReview
+  - NeedsTechnicalReview
+  - NeedsUpdate
+  - overflow
+  - 'overflow: scroll;'
+translation_of: Web/CSS/overflow
+---
+<p>{{ CSSRef() }}</p>
+
+<p>CSS属性<strong> overflow </strong>定义当一个元素的内容太大而无法适应 <a href="/zh-CN/docs/CSS/block_formatting_context">块级格式化上下文</a> 时候该做什么。它是 {{cssxref("overflow-x")}} 和{{cssxref("overflow-y")}}的 <a href="/zh-CN/docs/Web/CSS/Shorthand_properties">简写属性 </a>。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
+
+
+
+<p>这个选项包含剪切，显示滚动条，或者显示 从容器溢出到周围区域的内容。</p>
+
+<p>指定除<code>visible</code>(默认值)以外的值将创建一个新的 <a href="/zh-CN/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">块级格式化上下文</a>. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会在每个滚动步骤后强行重新包装内容，从而导致慢滚动体验。</p>
+
+<p>为使 <code>overflow </code>有效果，块级容器必须有一个指定的高度（<code>height</code>或者<code>max-height</code>）或者将<code>white-space</code>设置为<code>nowrap</code>。</p>
+
+<div class="note">
+<p><strong>注意:</strong>  设置一个轴为<code>visible</code>（默认值），同时设置另一个轴为不同的值，会导致设置<code>visible</code>的轴的行为会变成<code>auto</code>。 </p>
+</div>
+
+<div class="note">
+<p><strong>注意</strong>: 即使将overflow设置为hidden，也可以使用JavaScript {{domxref("Element.scrollTop")}} 属性来滚动HTML元素。</p>
+</div>
+
+<h2 id="语法" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">语法</h2>
+
+<pre class="brush:css  language-css" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/* 默认值。内容不会被修剪，会呈现在元素框之外 */</span>
+<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> visible<span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="comment token" style="color: #708090;">/* 内容会被修剪，并且其余内容不可见 */</span>
+<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> hidden<span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="comment token" style="color: #708090;">/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */</span>
+<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> scroll<span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="comment token" style="color: #708090;">/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */</span>
+<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> auto<span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="comment token" style="color: #708090;">/* 规定从父元素继承overflow属性的值 */</span>
+<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> inherit<span class="punctuation token" style="color: #999999;">;</span></code>
+
+</pre>
+
+<p> 从下面列表中选出一个或两个关键字来指定<code>overflow</code> 属性。如果指定了两个关键字，第一个关键字应用于<code>overflow-x</code>，第二个关键字应用于<code>overflow-y</code>。否则，<code>overflow-x</code>和<code>overflow-y</code>都设置为相同的值。</p>
+
+<div class="note">
+<p><strong>注意</strong>: 在Firefox 63之前，这些值是反向的，第一个值应用于<code>overflow-y</code>，第二个值应用于<code>overflow-x</code>。Firefox 63更新了这个顺序，以匹配对<a href="https://www.fxsitecompat.com/en-CA/docs/2018/overflow-shorthand-syntax-has-been-updated-to-swap-2-values/">规范的更改</a>。此更改是为了匹配使用新逻辑属性<code>overflow-block</code>和<code>overflow-inline</code>时的顺序。</p>
+</div>
+
+<pre><code>overflow-x: scroll;
+overflow-y: hidden;
+/* On Firefox 61 and 62, this is the same as */
+overflow: hidden scroll;
+/* But on Firefox 63 and later, it will be */
+overflow: scroll hidden;</code></pre>
+
+<h3 id="值" style="font-size: 1.71428571428571rem;">值</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>默认值。内容不会被修剪，可以呈现在元素框之外。</dd>
+ <dt><code>hidden</code></dt>
+ <dd>如果需要，内容将被剪裁以适合填充框。 不提供滚动条。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>如果需要，内容将被剪裁以适合填充框。 浏览器显示滚动条，无论是否实际剪切了任何内容。 （这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。</dd>
+ <dt><code>auto</code></dt>
+ <dd>取决于用户代理。 如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。 如果内容溢出，桌面浏览器会提供滚动条。</dd>
+ <dt><code>overlay</code> {{experimental_inline}} {{deprecated_inline}}</dt>
+ <dd>行为与<code>auto</code>相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。</dd>
+</dl>
+
+<h4 id="Mozilla_扩展" style="font-size: 1.28571428571429rem;">Mozilla 扩展</h4>
+
+<dl>
+ <dt><code>-moz-scrollbars-none </code>{{ obsolete_inline() }}<a href="#Deprecated">[1]</a></dt>
+ <dd>使用 <code>overflow:hidden</code> 代替.</dd>
+ <dt><code>-moz-scrollbars-horizontal </code>{{ Deprecated_inline() }}<a href="#Deprecated">[1]</a></dt>
+ <dd>推荐使用 {{ Cssxref("overflow-x") }} 和 {{ Cssxref("overflow-y") }} .</dd>
+ <dt><code>-moz-scrollbars-vertical </code>{{ Deprecated_inline() }}<a href="#Deprecated">[1]</a></dt>
+ <dd>推荐使用 {{ Cssxref("overflow-x") }} 和 {{ Cssxref("overflow-y") }} .</dd>
+ <dt>-moz-hidden-unscrollable {{ non-standard_inline() }}</dt>
+ <dd>主要用于内部和主题。禁用 方向键 和 鼠标滚轮 来滚动XML跟元素以及&lt;HTML&gt;和&lt;body&gt;元素。</dd>
+ <dt>[1] As of Firefox 63, this feature is behind a feature preference setting. In about:config, set <code>layout.css.overflow.moz-scrollbars.enabled</code> to <code>true</code></dt>
+</dl>
+
+<h3 id="形式语法" style="font-size: 1.71428571428571rem;">形式语法</h3>
+
+<pre class="syntaxbox" style="font-size: 14px; white-space: normal;">{{csssyntax}}</pre>
+
+<h2 id="示例" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">示例</h2>
+
+<pre class="brush: css  language-css" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;">p </span><span class="punctuation token" style="color: #999999;">{</span>
+     <span class="property token" style="color: #990055;">width</span><span class="punctuation token" style="color: #999999;">:</span> 12em<span class="punctuation token" style="color: #999999;">;</span>
+     <span class="property token" style="color: #990055;">height</span><span class="punctuation token" style="color: #999999;">:</span> 6em<span class="punctuation token" style="color: #999999;">;</span>
+     <span class="property token" style="color: #990055;">border</span><span class="punctuation token" style="color: #999999;">:</span> dotted<span class="punctuation token" style="color: #999999;">;</span>
+     <span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> visible<span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;">/* 内容不会被修剪 */</span>
+<span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
+
+<p style="border-style: dotted; border-width: initial; overflow: visible; display: inline-block; width: 12em; height: 6em;"><code>visible</code> (default)<br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;">p</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> { </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="property token" style="color: #990055;">overflow</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">: hidden; </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/* 不显示滚动条 */</span> </code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> }</code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<p style="border-style: dotted; border-width: initial; overflow: hidden; display: inline-block; width: 12em; height: 6em;"><code>overflow: hidden</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;">  p</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> { </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="property token" style="color: #990055;">overflow</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">: scroll; </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/* 始终显示滚动条 */</span> </code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> }</code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<p style="border-style: dotted; border-width: initial; overflow: scroll; display: inline-block; width: 12em; height: 6em;"><code>overflow: scroll</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;">p</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> { </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="property token" style="color: #990055;">overflow</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">: auto; </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/* 必要时显示滚动条 */</span> </code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> }</code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<p style="border-style: dotted; border-width: initial; overflow: auto; display: inline-block; width: 12em; height: 6em;"><code>overflow: auto</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<h2 id="规范" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">规范</h2>
+
+<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 Overflow', '#propdef-overflow', 'overflow') }}</td>
+   <td>{{ Spec2('CSS3 Overflow') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>无变更</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初始规定</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="border-color: transparent;">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}[1]</td>
+   <td>4.0[2]</td>
+   <td>7.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="border-color: transparent;">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">IE Phone</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> [1] Firefox 3.6 (Gecko 1.9.2)中, <code> overflow 属性被错误地应用到表组元素（&lt;thead&gt;,&lt;tbody&gt;,&lt;tfoot&gt;）中。这个错误在之后的版本中被修复。</code> </p>
+
+<p>[2]Internet Explorer 4 － 6 会扩大一个带有<code>overflow:visible 的元素以适应它的内容。此处</code><code> height/width 的<font face="Open Sans, Arial, sans-serif">作用相当于</font></code><code> min-height/min-width</code>。</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+</ul>