CSS查漏补缺：CSS盒模型、外边距重叠、BFC-一一网

本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

1、CSS盒模型

浏览器根据CSS 基础框盒模型（CSS basic box model），将元素表示成矩形的盒子，CSS 决定这些盒子的大小、位置以及属性。

每个盒子由四个区域组成：内容区域 content area、内边距区域 padding area、边框区域 border area、外边距区域 margin area。但盒子的大小由content+padding+border这几部分决定，把margin算进去的那是盒子占据的位置，而不是盒子的大小。

CSS盒模型分为W3C标准盒模型和IE盒模型。

W3C标准盒模型：属性width,height只包含内容content，不包含border和padding。

IE盒模型：属性width,height包含border和padding，指的是content+padding+border。

CSS 如何设置这两种模型？

box-sizing : content-box; // 默认 W3C标准盒模型
box-sizing : border-box;  // IE盒模型
复制代码

详细阅读：MDN:box-sizing

JS 如何设置获取盒模型对应的宽和高？

dom.style.width/height;//设置获取的是内联样式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置
复制代码

2、外边距重叠

MDN：块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。

出现外边距重叠一般有三种情况：

同一层相邻元素之间

相邻的两个元素之间的外边距重叠：

  <style>
    div:nth-child(1){
      margin-bottom: 13px;
    }
    div:nth-child(2){
      margin-top: 87px;
    }
  </style>
  <div style="width: 100px;height: 100px;background-color:black;"></div>
  <div style="width: 100px;height: 100px;background-color:blue;"></div>
复制代码

截屏2021-05-27 23.31.14.png

这个例子如果以为边界会合并的话，理所当然会猜测上下2个元素会合并一个100px的边界范围，但其实会发生边界折叠，只会挑选最大边界范围留下，所以这个例子的边界范围其实是87px。

没有内容将父元素和后代元素分开

  <style type="text/css">
    .outer_a {
      width: 100px;
      margin-top: 13px;
      margin-bottom: 87px;
    }
    .inner_a {
      margin-top: 87px;
      width: 100%;
      height: 100px;
      background-color:black;
    }
    .inner_b {
      margin-bottom: 13px;
      width: 100%;
      height: 100px;
      background-color:blue;
    }
    .outer_b{
      width: 100px;
      height: 100px;
      background-color:red;
    }
  </style>
  <div class="outer_a">
    <div class="inner_a"></div>
    <div class="inner_b"></div>
  </div>
  <div class="outer_b"></div>
复制代码

如上图所示，会发现父级标签.outer_a的margin-top:13px根本没有发挥作用，而下边距以父级元素的下边距为准。不难得出结论：父子元素的外边距，也是谁大听谁的。

但当我们在.outer_a添加了边框border: 1px solid;，向上边距会将父级元素及其子元素一块计算，下边距同理。

以下几种情况会导致父子级元素出现外边距重叠：

父元素完全没有设定边框border、内边距paddng、高度height、最小高度min-height 、最大高度max-height
父级没有创建BFC或清除浮动

空的块级元素

  <style type="text/css">
    .box_a {
      width: 100px;
      height: 100px;
      background-color:black;
    }
    .box_b {
      margin-top: 87px;
      margin-bottom:13px;
    }
    .box_c{
      width: 100px;
      height: 100px;
      background-color:red;
    }
</style>
<div class="box_a"></div>
<div class="box_b"></div>
<div class="box_c"></div>
复制代码