【CSS】【overflow】css中的overflow属性

最新推荐文章于 2024-08-10 12:02:24 发布

ByteFlys

最新推荐文章于 2024-08-10 12:02:24 发布

阅读量451

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u013718730/article/details/89446178

版权

javascript 专栏收录该内容

107 篇文章 6 订阅

订阅专栏

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个属性，分别指定不同规则