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>