Web前端中两个经典的bug以及bfc

最新推荐文章于 2023-03-27 14:44:42 发布

shjbsjiqjbsjdj

最新推荐文章于 2023-03-27 14:44:42 发布

阅读量212

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_46201220/article/details/105738421

版权

margin-top塌陷

什么是margin-top塌陷?

 <div class="wrapper">
        <div class="box"></div>
    </div>

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 100px;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: lightblue;
            margin-top: 50px;
        }
    </style>

下面是效果图片

子级的margin-top没有生效，当没有超过父级的margin-top时，他们的margin-top进行了合并。

下面进行子级元素的margin-top超过父级是都生效的解释

   <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 100px;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: lightblue;
            margin-top: 150px;  //这是改写之后的
        }
    </style>