CSS overflow 属性
CSS Overflow 属性
CSS overflow 属性用来控制元素内容溢出时候的处理方法。
基本语法
overflow: visible | hidden | scroll | auto;
取值解释
visible
默认值,内容不裁剪,允许溢出边框。hidden
裁剪边框外的内容。scroll
显示滚动条,不管是否需要。auto
根据需要显示滚动条。
适用对象
overflow
属性适用于所有的块级元素、行内块级元素和多个其他元素的伪元素。但是,对于 table 元素来说,这个属性值只有在应用于 table 的标签上的时候才是有效的,对于 table 相关的标签,如 table-box、table-row、table-cell 等都是不支持 overflow
属性的。
overflow-x 和 overflow-y
除了 overflow
属性外,CSS 3 引入了 overflow-x
和 overflow-y
来分别指定横向和纵向的溢出内容。这两个属性可单独使用。
使用技巧
溢出内容没有必要时使用 hidden
当元素内的内容明显超出它的边框时,使用 overflow: hidden;
可以把超出边框的内容隐藏掉。
示例代码:
<style>
.box {
width: 300px;
height: 100px;
overflow: hidden;
}
</style>
<div class="box">
<p>这里是一些超出边界的内容。</p>
</div>
滚动条根据需要自动显示
应用 overflow: auto;
可以使得只有在内容超出元素边界时才会出现滚动条,避免了无用的滚动条的出现。
示例代码:
<style>
.box {
width: 300px;
height: 100px;
overflow: auto;
}
</style>
<div class="box">
<p>这里是一些较短的内容。</p>
</div>
<div class="box">
<p>这里是一些非常长的内容,需要自动显示滚动条。</p>
</div>
使用滚动条
当元素内的内容高度或宽度超出元素设置的高度或宽度时,我们可以使用 overflow: scroll;
,此时会自动出现滚动条,无需等待元素发生溢出。
示例代码:
<style>
.box {
width: 300px;
height: 100px;
overflow: scroll;
}
</style>
<div class="box">
<p>这里是一些非常长的内容,需要自动显示滚动条。</p>
</div>
用于清除浮动的盒子
我们经常使用 overflow:hidden 清除浮动。实际上当 overflow 值非visible时,都会启动BFC。且 BFC 会阻止盒子的外侧的margin合并。
示例代码:
<style>
.parent {
overflow: hidden; /* overflow值不必是hidden,只要不是visible就行 */
}
.box {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
}
</style>
<div class="parent">
<div class="box" style="background: red;"></div>
<div class="box" style="background: blue;"></div>
<div class="box" style="background: yellow;"></div>
</div>