overflow多个作用

最新推荐文章于 2023-02-19 14:07:00 发布

浩哥学习编程之路

最新推荐文章于 2023-02-19 14:07:00 发布

阅读量429

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_46978034/article/details/110505337

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

overflow:hidden多个作用

overflow: visible	默认值超出的部分不会被剪切掉
overflow:hidden	超出的部分被剪切掉，不会再显示
overflow: scroll	始终生成滚动条
overflow: auto	自动来判断生成滚动条

1.解决margin-top上外边距塌陷的问题
未解决前
在这里插入图片描述
给父元素添加overflow：hidden；

    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
            /* 解决margin-top塌陷 */
            overflow: hidden;
        }
        
        .box1 {
            margin-top: 60px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

解决后
在这里插入图片描述
2.溢出隐藏超出内容的部分给隐藏起来

未解决前
在这里插入图片描述
解决后代码演示

    <style>
        .box {
            display: inline-block;
            width: 177px;
            height: 20px;
            background-color: pink;
            /* 解决超出部分给隐藏起来 */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        我们的征程是星辰大海 我们的征程是星辰大海
    </div>
</body>

解决后
在这里插入图片描述

3.用来清除浮动的影响，因为元素浮动后会漂浮在标准元素的上面，被使用的浮动的元素是不保留原始位置的
未解决前
在这里插入图片描述
解决办法给父盒子添加overflow: hidden;

<style>
        .box {
            overflow: hidden;
        }
        
        .box1,
        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .box2 {
            background-color: red;
        }
        
        .box3 {
            width: 100%;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>

解决后
在这里插入图片描述

浩哥学习编程之路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
overflow多个作用

overflow:hidden多个作用1.解决margin-top上外边距塌陷的问题未解决前给父元素添加overflow：hidden； <style> * { padding: 0px; margin: 0px; } .box { width: 300px; height: 300px; bac
复制链接

扫一扫