CSS参考手册
基本框模型 | Basic Box Model
溢出 | overflow
overflow属性指定当内容溢出其块级容器时,是否剪辑内容，显示滚动条或显示溢出的内容。
/* Content is not clipped */
overflow: visible;
/* Content is clipped, with no scrollbars */
overflow: hidden;
/* Content is clipped, with scrollbars */
overflow: scroll;
/* Let the browser decide */
overflow: auto;
/* Global values */
overflow: inherit;
overflow: initial;
overflow: unset;使用overflow 默认值（visible）以外的值将创建一个新的块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会强制（重新）包围内容元素。这种行为（重新包围内容元素）会在每一次移动滚动条之后发生，会使得滚动体验变差（慢）。
为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。
注意: 当相关HTML元素被设置为 scrollTop 时，即使 overflow 值为 hidden ，这个元素依旧会滚动 。
初始值 |
visible |
|---|---|
适用元素 |
non-replaced block-level elements and non-replaced inline-block elements |
是否是继承属性 |
no |
适用媒体 |
visual |
计算值 |
as specified |
Animation type |
discrete |
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
该overflow属性被指定为从下面的值列表中选择的单个关键字。
值
visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，并且浏览器会使用滚动条，无论内容是否会被裁减。这避免了在动态环境中滚动条的出现和消失问题。打印机会打印溢出的内容。auto取决于用户代理。浏览器，例如火狐，会在内容溢出时提供滚动条。
Mozilla扩展
-moz-scrollbars-none 使用 overflow:hidden 代替.-moz-scrollbars-horizontal 推荐使用overflow-x和overflow-y.-moz-scrollbars-vertical 推荐使用overflow-x和overflow-y.-moz-hidden-unscrollable主要用于内部和主题。禁用 方向键 和 鼠标滚轮 来滚动XML跟元素以及<HTML>和<body>元素。
正式语法
visible | hidden | scroll | auto示例
p {
width: 12em;
height: 6em;
border: dotted;
overflow: visible; /* content is not clipped */
}visible （默认）
然而，向你解释如何谴责快乐和痛苦大赞这一切错误的想法。
p { overflow: hidden; /* no scrollbars are provided */ }overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: scroll; /* always show scrollbars */ }overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: auto; /* append scrollbars if necessary */ }overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
规范
Specification |
Status |
Comment |
|---|---|---|
CSS Overflow Module Level 3The definition of 'overflow' in that specification. |
Working Draft |
|
CSS Basic Box ModelThe definition of 'overflow' in that specification. |
Working Draft |
No change. |
CSS Level 2 (Revision 1)The definition of 'overflow' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
|---|---|---|---|---|---|---|
Basic support |
1.0 |
(Yes) |
1.0 (1.7 or earlier)1 |
4.02 |
7.0 |
1.0 (85) |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|---|
Basic support |
? |
(Yes) |
1.0 (1)1 |
? |
? |
? |
基本框模型 | Basic Box Model相关
层叠样式表（ Cascading Style Sheets ）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
加载中,请稍侯......