1、margin塌陷bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;padding: 0;
    }
    .wrapper{
        margin-left: 100px;
         margin-top: 100px;
         width: 100px;
         height: 100px;
         background-color: blue;
         /* border-top: 1px solid red; //手法不专业，太残暴*/
         overflow:hidden; /*推荐方式*/
    }
    .content{
        margin-left: 50px;
        margin-top: 50px;
        width:50px;
        height: 50px;
        background-color: green;
    }

</style>
<body>

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

</body>
</html>

我想要的效果：content容器相对于父级下移。
        bug原因：
        1.wrapper容器已经有一个margin-top:100px;content也设置一个margin-top:50px;结果是不会产生效果。
        2.除非设置margin-top大于父级容器的这个值，才会看到效果，但父级容器随它一起下移了，就好像父级容器设置了这个值一样
        逃避方式1：——//手法不专业，太残暴，不推荐，产品经理（它的像素眼）也不会同意
        给父级容器加一个上边，border-top: 1px solid red;
        使得子容器能够看到父级的上边来下移。
        逃避方式2：触发BFC，让特定的盒子遵循另一套规则
        如何触发一个盒子的bfc

poosition:absolute;//假如内容就是要摆在那，后面的内容跟随在它下面就不合适
display:inline-block;//假如内容就不要独占一行时就不合适
float:left/right;//假如需求
overflow:hidden;//假如里面的内容就是想要溢出盒子的一部分就不合适

但同时产生了新的问题，需要看需求是否可以配合这些代码使用。

2、magin合并bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;padding: 0;
    }

    .box1{
        background-color: red;
        margin-right: 100px;
    }
    .box2{
        background-color: green;
        margin-left:100px;
        /* overflow: hidden; */
    }

    .demo1{
        background-color: red;
    }
    .demo2{
        background-color: green;
    }
    .bfc{
        overflow: hidden;
    }
</style>
<body>

    <span class="box1">123</span>
    <span class="box2">456</span>
    <div class="bfc">
        <div class="demo1">1111</div>
    </div>
    <div class="bfc">
        <div class="demo2">2222</div>
    </div> 
</body>
</html>

我想要的效果：box1容器和box2容器不共用magin设置的值。
        bug原因：
        1.box1的margin-right:100px和box2的margin-left:100px共用了100px的距离。
        2.两个容器，一个设置marign-bottom，一个设置margin-top也是这个问题。
        逃避方式1：也是触发BFC规则
        如果出现上下margin合并的话，在它们各自的外面再套一个触发了bfc规则的容器
        其实也不推荐，因为修复时添加了多余的html元素，改变了结构。尽量不改变HTML结构是原则。
        合并的bug，真正解决方式是不解决，只是采用用数学方式，在一个元素上设置margin-right或者margin-left

前端两个经典bug

1、margin塌陷bug

2、magin合并bug

猜你喜欢