什么是CSS盒模型？

盒模型，英文即box model，可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。盒模型包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素，如下图所示：
image.png

  • content-盒子的内容，显示文本和图像。
  • padding-指一个元素的内容和其边界之间的空间，内边距是透明的。
  • border-围绕在内边距和内容外的边框。

  • margin-定义元素周围的空间，外边距是透明的。

    盒模型的分类？

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

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

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

下图直观地展示W3C标准盒模型和IE盒模型的区别：
CSS盒模型理解 - 图2
很明显IE盒模型的width和height包含了padding和border，而W3C标准盒模型没有包含。
如何用CSS代码表示两种盒模型？

  1. box-sizing: content-box;  /*W3C标准盒模型，也是默认的设置属性*/
  2. box-sizing: border-box;  /*IE盒模型，width和height包含了padding和border*/

两种盒模型width和height的直观对比

下面用代码直观展示两种盒模型的width和height，首先写一段HTML代码，其中用两个div元素分别表示W3C标准盒模型和IE盒模型：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>两种盒模型对比</title>
  6. </head>
  7. <body>
  8. <div class="content-box">W3C标准盒模型</div>
  9. <div class="border-box">IE盒模型</div>
  10. </body>
  11. </html>

然后再写一段CSS代码，为两个div元素设置样式，除了box-sizing值不同，其余属性均赋予相同的值

  1. .content-box {
  2.   box-sizing: content-box;  /*W3C标准盒模型*/
  3.   margin: 25px;
  4.   border: 5px solid red;
  5.   padding: 15px;
  6.   width: 100px;
  7.   height: 100px;
  8. }
  10. .border-box {
  11.   box-sizing: border-box;  /*IE盒模型*/
  12.   margin: 25px;
  13.   border: 5px solid blue;
  14.   padding: 15px;
  15.   width: 100px;
  16.   height: 100px;
  17. }

可以直观地在网页中看到两种盒模型的大小：
image.png
在浏览器中打开开发者工具，可以看到两种模型的style样式如下：

  • W3C标准盒模型：

image.png
image.png
width=100px，height=100px，盒子大小为content+padding+border，即100+215+25=140px

  • IE盒模型：

image.png
image.png
width=60px，height=60px，盒子大小为content+padding+border，即60+215+25=100px
由上面的分析可以知道，当使用W3C标准盒模型（content-box）时，指定的width和height即是指content内容的宽高，如果此时有内边距padding和边框border时，盒子的大小将包括padding和border值。如果使用IE盒模型（border-box）时，指定的width和height已经是指盒子的大小，如果此时有内边距padding和边框border时，内容content的大小将由浏览器计算，减去padding和border的值。

如何理解盒模型中的margin？

上述情况，外边距margin=25px，设置margin=50px看一下效果：
2.png
可以看到：

  1. 盒子大小不包括margin，而margin影响的是盒子占据的位置大小，即盒子与盒子间的位置关系。

  2. 盒子之间上下外边距发生了重叠合并。

    margin合并，有哪些需要注意的？

    以下情况会合并：

  3. 父子元素margin合并。

  4. 兄弟元素margin合并。

注意：只有上下外边距会合并，左右外边距并不合并。
如何阻止合并？

  1. 父子元素合并用padding/border挡住。
  2. 父子元素合并用overflow:hidden挡住。
  3. 父子元素合并用display:flex。
  4. 兄弟元素合并用inline-block消除。