【CSS】【overflow】css中的overflow属性
程序员文章站
2024-01-29 23:11:34
...
css中的overflow属性，用于在元素空间不足时，控制其内容如何显示
先看这样一个布局页面
<body>
<div id="div1">
<img id="div2" src="https://www.baidu.com/img/xinshouye_c9d9de2ff40fa160f807f75f34db4ad0.gif"/>
</div>
<div id="div3"></div>
</body>
visible：默认值，空间不足时超出元素显示，但是不占据额外文档空间
<style>
#div1 {
width: 400px;
height: 400px;
background: yellow;
display: inline-block;
overflow: visible;
}
#div2 {
width: 800px;
height: 200px;
}
#div3 {
width: 800px;
height: 200px;
background: #FF000099;
display: inline-block;
}
</style>
scroll：显示滚动条，不管空间是否足够都显示
auto：空间不足时显示滚动条，空间足够时不显示滚动条
hidden：超出部分不显示
overflow-x，overflow-y：
overflow在x，y方向上使用了同一规则，也可以分开2个属性，分别指定不同规则