From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/overflow/index.html | 236 ++++++++++++++++++++++++++++++++ 1 file changed, 236 insertions(+) create mode 100644 files/zh-cn/web/css/overflow/index.html (limited to 'files/zh-cn/web/css/overflow/index.html') 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 +--- +

{{ CSSRef() }}

+ +

CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 {{cssxref("overflow-x")}} 和{{cssxref("overflow-y")}}的 简写属性 。

+ +
{{EmbedInteractiveExample("pages/css/overflow.html")}}
+ + + +

这个选项包含剪切，显示滚动条，或者显示 从容器溢出到周围区域的内容。

+ +

指定除visible(默认值)以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会在每个滚动步骤后强行重新包装内容，从而导致慢滚动体验。

+ +

为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。

+ +
+

注意:  设置一个轴为visible（默认值），同时设置另一个轴为不同的值，会导致设置visible的轴的行为会变成auto。 

+
+ +
+

注意: 即使将overflow设置为hidden，也可以使用JavaScript {{domxref("Element.scrollTop")}} 属性来滚动HTML元素。

+
+ +

语法

+ +
/* 默认值。内容不会被修剪，会呈现在元素框之外 */
+overflow: visible;
+
+/* 内容会被修剪，并且其余内容不可见 */
+overflow: hidden;
+
+/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
+overflow: scroll;
+
+/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
+overflow: auto;
+
+/* 规定从父元素继承overflow属性的值 */
+overflow: inherit;
+
+
+ +

 从下面列表中选出一个或两个关键字来指定overflow 属性。如果指定了两个关键字，第一个关键字应用于overflow-x，第二个关键字应用于overflow-y。否则，overflow-x和overflow-y都设置为相同的值。

+ +
+

注意: 在Firefox 63之前，这些值是反向的，第一个值应用于overflow-y，第二个值应用于overflow-x。Firefox 63更新了这个顺序，以匹配对规范的更改。此更改是为了匹配使用新逻辑属性overflow-block和overflow-inline时的顺序。

+
+ +
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;
+ +

值

+ +
+
visible
+
默认值。内容不会被修剪，可以呈现在元素框之外。
+
hidden
+
如果需要，内容将被剪裁以适合填充框。 不提供滚动条。
+
scroll
+
如果需要，内容将被剪裁以适合填充框。 浏览器显示滚动条，无论是否实际剪切了任何内容。 （这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。
+
auto
+
取决于用户代理。 如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。 如果内容溢出，桌面浏览器会提供滚动条。
+
overlay {{experimental_inline}} {{deprecated_inline}}
+
行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。
+
+ +

Mozilla 扩展

+ +
+
-moz-scrollbars-none {{ obsolete_inline() }}[1]
+
使用 overflow:hidden 代替.
+
-moz-scrollbars-horizontal {{ Deprecated_inline() }}[1]
+
推荐使用 {{ Cssxref("overflow-x") }} 和 {{ Cssxref("overflow-y") }} .
+
-moz-scrollbars-vertical {{ Deprecated_inline() }}[1]
+
推荐使用 {{ Cssxref("overflow-x") }} 和 {{ Cssxref("overflow-y") }} .
+
-moz-hidden-unscrollable {{ non-standard_inline() }}
+
主要用于内部和主题。禁用 方向键 和 鼠标滚轮 来滚动XML跟元素以及<HTML>和<body>元素。
+
[1] As of Firefox 63, this feature is behind a feature preference setting. In about:config, set layout.css.overflow.moz-scrollbars.enabled to true
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +
p {
+     width: 12em;
+     height: 6em;
+     border: dotted;
+     overflow: visible; /* 内容不会被修剪 */
+}
+ +
+ +
+ +
+ +
+ +
+ +
+ +

visible (default)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: hidden; /* 不显示滚动条 */  }
+ +
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
  p { overflow: scroll; /* 始终显示滚动条 */  }
+ +
+ +

overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: auto; /* 必要时显示滚动条 */  }
+ +
+ +

overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow') }}{{ Spec2('CSS3 Overflow') }}
{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}{{ Spec2('CSS3 Box') }}无变更
{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}{{ Spec2('CSS2.1') }}初始规定
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{ CompatGeckoDesktop("1") }}[1]4.0[2]7.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 [1] Firefox 3.6 (Gecko 1.9.2)中,  overflow 属性被错误地应用到表组元素（<thead>,<tbody>,<tfoot>）中。这个错误在之后的版本中被修复。 

+ +

[2]Internet Explorer 4 － 6 会扩大一个带有overflow:visible 的元素以适应它的内容。此处 height/width 的作用相当于 min-height/min-width。

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf