本文概述
- CSS溢出属性值
- CSS溢出示例
【CSS溢出overflow】我们知道页面上的每个元素都是一个矩形框, 并且这些框的大小, 位置和行为都是通过CSS控制的。
让我们举个例子：如果不设置框的高度, 则框的大小将与内容一样大。但是, 如果你设置了框的特定高度或宽度, 而其中的内容无法容纳, 那将会发生什么。 CSS溢出属性用于克服此问题。它指定是剪切内容, 渲染滚动条还是仅显示内容。
CSS溢出属性值
| 值 | 描述 |
|---|---|
| visible | 它指定不修剪溢出。它在元素的框外渲染。这是默认值。 |
| hidden | 它指定溢出被裁剪, 其余内容将不可见。 |
| scroll | 它指定剪辑溢出, 并使用滚动条查看其余内容。 |
| auto | 它指定如果剪辑了溢出, 则需要滚动条才能查看其余内容。 |
| inherit | 它从其父元素继承属性。 |
| initial | 它用于将属性设置为其初始值。 |
<
!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>
The overflow property specifies what to do if the content of an element exceeds the size of the element's box.<
/p>
<
p>
overflow:scroll<
/p>
<
div class="scroll">
You can use the overflow property when you want to have better control of the layout.
The default value is visible.<
/div>
<
p>
overflow:hidden<
/p>
<
div class="hidden">
You can use the overflow property when you want to have better control of the layout.
The default value is visible.<
/div>
<
/body>
<
/html>
输出：
溢出属性指定如果元素的内容超过元素框的大小时该怎么办。
溢出：滚动
溢出：隐藏
