css面试题随笔

之前在前端群有个汉纸聊到他面试别人时问到：margin塌陷和margin合并问题如何解决？

然后我自己也懵逼了哈哈，因为只是遇到过并不知道这叫塌陷、合并哈哈哈················那我们一起来看看怎么回事吧，加上要怎么解决哦

塌陷问题：

在标准文档流中，竖直方向（记住是竖直方向，左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象

HTML代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>margin塌陷(父子)</title>

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      .father {

        width: 200px;

        height: 200px;

        background-color: red;

        margin-top: 100px;

      }

      .son {

        width: 50px;

        height: 50px;

        background-color: #eee;

        opacity: 0.8;

        margin-top: 150px;

      }

    </style>

  </head>

  <body>

    <div class="father">

      <div class="son"></div>

    </div>

  </body>

</html>

虽然给类名为：son 的元素给了 margin-top: 150px; 但是子元素并没有相对于父元素 margin-top: 150px; ，而是和父元素一起下移了。（即父级盒子往下塌陷了50px）。

原理:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样。

解决方案：

/* 解决方案 */

      /* 给父级设置边框或内边距(不建议使用) */

      /* .father {

        border: 1px solid #000000;

      } */

      /* 触发bfc(块级格式上下文),改变父级的渲染规则 */

      /* 改变父级的渲染规则有以下四种方法,给父级盒子添加

      (1)position:absolute/fixed

      (2)display:inline-block;

      (3)float:left/right

      (4)overflow:hidden

      这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷 */

合并问题：

块级元素的上外边距与下外边距有时会合并为单个外边距。

margin合并计算规则为正正取大值，正负值相加，负负最负值。

HTML代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>margin塌陷</title>

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      .box1,

      .box2 {

        width: 300px;

        height: 300px;

      }

      .box1 {

        background-color: brown;

        margin-bottom: 60px;

      }

      .box2 {

        background-color:cornflowerblue;

        margin-top: 70px;

      }

    </style>

  </head>

  <body>

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

    <div class="box2"></div>

  </body>

</html>

上面的有：margin-bottom: 60px; 下面的有：margin-top: 70px; 按理来说那它俩之间的距离应该是130px，然而事实并非如此，它俩之间的距离是70px。

其实这个margin合并的bug你没有必要去解决，比如你现在有两个元素，你想让他俩上下130px，没有必要60px+70px吧，你只需要上面的margin-bottom为130px，就可以了！！和margin塌陷不同，margin塌陷是视觉上的效果，你加个css就能弥补。

解决方案：

      /* 解决方案： */

      /* 给box1或box2加上一层父级元素并加上overflow:hidden; */

      /* .box2{

          float: left;

      } */

      /* .box2 {

        position: absolute;

      } */

      /* .box1 {

        display: inline-block;

      } */

      /* .box2 {

        display: inline-block;

      } */

HTML改为：

  <body>

    <!-- <div style="overflow: hidden;">

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

    </div> -->

    <div style="overflow: hidden;">

      <div class="box2"></div>

    </div>

  </body>