CSS overflow

CSS overflow

CSS overflow属性
指定在其块级容器溢出时如何处理内容
我们知道页面上的每个元素都是一个矩形框,并且这些框的大小,位置和行为都是通过CSS控制的。
让我们举个例子: t设置盒子的高度,它将随着内容的增长而变大。但是,如果您设置框的特定高度或宽度,而里面的内容无法容纳,那将会发生什么。 CSS overflow属性用于解决此问题。它指定是否剪切内容,渲染滚动条还是仅显示内容。

CSS Overflow属性值

说明
visible 它指定显示超出边框的内容,它在元素的框外渲染,这是默认值。
hidden 它指定超出内容不可见。
scroll 它指定超出内容使用滚动条可以查看。
auto 未超出没有滚动条,超出内容使用滚动条可以查看。
inherit 它从其父元素继承属性。
initial 用于将属性设置为其初始值。

CSS overflow示例

让我们看一个简单的CSS overflow属性示例。
 <!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
    background-color:#00ffff;
    width: 100px;
    height: 100px;
    overflow: scroll;
}
div.hidden {
    background-color:#00FF00;
    width: 100px;
    height: 170px;
    overflow: hidden;
}
</style>
</head>
<body>
<p>overflow属性指定如果元素的内容超过元素框的大小该怎么办。</p>
<p>overflow:scroll</p>
<div class="scroll">当您想更好地控制布局时,可以使用overflow属性。默认值是可见的。
 The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">当您想更好地控制布局时,可以使用overflow属性。默认值是可见的。</div>
</body>
</html>
输出:

overflow属性指定如果元素的内容超过元素框的大小该怎么办。

overflow:scroll

当您想更好地控制布局时,可以使用overflow属性。默认值是可见的。

overflow:hidden

当您想更好地控制布局时,可以使用overflow属性。默认值是可见的。