srcmini本文概述
CSS溢出属性指定在其块级容器溢出时如何处理内容。
我们知道页面上的每个元素都是一个矩形框, 并且这些框的大小, 位置和行为都是通过CSS控制的。
让我们举个例子：如果不设置框的高度, 则框的大小将与内容一样大。但是, 如果你设置了框的特定高度或宽度, 而其中的内容无法容纳, 那将会发生什么。 CSS溢出属性用于克服此问题。它指定是剪切内容, 渲染滚动条还是仅显示内容。
CSS溢出属性值
| 值 | 描述 |
|---|---|
| visible | 它指定不修剪溢出。它在元素的框外渲染。这是默认值。 |
| hidden | 它指定溢出被裁剪, 其余内容将不可见。 |
| scroll | 它指定剪辑溢出, 并使用滚动条查看其余内容。 |
| auto | 它指定如果剪辑了溢出, 则需要滚动条才能查看其余内容。 |
| inherit | 它从其父元素继承属性。 |
| initial | 它用于将属性设置为其初始值。 |
CSS溢出示例
让我们看一个简单的CSS溢出属性。
<!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>输出：
溢出属性指定如果元素的内容超过元素框的大小时该怎么办。
溢出：滚动
溢出：隐藏
评论前必须登录！
注册