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