这是我参与 11 月更文挑战的第 1 天，活动详情查看：2021最后一次更文挑战

我们说盒模型时到底在说啥

我们常说的盒模型其实有可能是在说一下两者之一：

块级盒子（Block box）和内联盒子（Inline box）
标准（W3C）盒模型与替代（IE）盒模型

这点不明确，可能会让人误解，所以让我们明确下到底是在说『盒子』—— 本质是 CSS 元素：

盒子 => 块级盒子（Block box） 和 内联盒子（Inline box） => CSS 元素

还是在说『盒模型』—— 本质是模型：

盒模型 => 标准（W3C）盒模型与替代（IE）盒模型 => CSS 模型

块级盒子（Block box）和内联盒子（Inline box）

块级盒子（Block box）

盒子会占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽每个盒子都会换行
width 和 height 属性可以发挥作用
内边距（padding），外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

默认情况下，<div>、<p>、<h1> 等都是块级盒子，也说成是块元素

内联盒子（Inline box）

盒子不会产生换行。
width 和 height 属性不起作用。
垂直方向的内边距（padding）、外边距（margin）以及边框（border）会被应用但是不会把其他处于 inline 状态的盒子推开
水平方向的内边距（padding）、外边距（margin）以及边框（border）会被应用且会把其他处于 inline 状态的盒子推开。

默认情况下，<a>、<span>、<em>、<strong> 等都是内联盒子，也说成是内联元素、行内元素。

display 属性可以改变盒子的类型，display: block; 为块级盒子，display: inline 为内联盒子

标准（W3C）盒模型与替代（IE）盒模型

盒模型的组成

CSS中组成一个块级盒子需要:

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置

如下图：

盒模型

标准（W3C）盒模型与替代（IE）盒模型的区别

二者的区别在于：width 和 height 的计算内容不同

标准（W3C）盒模型：

CSS 设置的 width ( height ) = 内容宽度（高度）
替代（IE）盒模型：

CSS 设置的 width ( height ) = CSS 设置的 border + padding + 内容宽度（高度）

也就是说，在替代模型中设置 width 设置的是整个盒模型的宽度，然后浏览器根据设置的 border 、 padding 来计算出内容宽度：

content width = width - border * 2 - padding * 2
```
  border 和 padding 左右都有，所以 * 2
  
```

这里我们看具体的例子：

    div {
        width: 300px;
        height: 200px;
        margin: 20px;
        padding: 15px;
        }
    .a {
        border: 5px solid blue;
        color: blue;
    }
    .b {
        box-sizing: border-box;
        border: 5px solid red;
        color: red;
    }

    <div class="a">这是标准（W3C）盒模型</div>
    <div class="b">这是 IE 盒模型</div>

标准（W3C）盒模型 VS 替代（IE）盒模型

如何设置两种盒模型？

通过 box-sizing 属性：

    .standard-box-model {
        box-sizing: content-box;        /* 设置为标准（W3C）盒模型 */
    }
    .IE-box-model {
        box-sizing: border-box;         /* 设置为替代（IE）盒模型 */
    }

通常情况下，我们使用的都是标准（W3C）盒模型，这是因为目前大家使用的 HTML 几乎都是下面这样：

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset=UTF-8>
            <title>Hello World!</title>
        </head>
        <body>
        </body>
    </html>

在 HTML5 中，<!DOCTYPE html> 的作用就是启用标准模式，而在这个标准模式下默认都是使用的标准（W3C）盒模型

如果没有这个声明，浏览器可能会进入其他的模式，比如『怪异模式（Quirks mode）』，大家看名字就知道，最好不要使用这个模式，不知道这算不算是官方吐槽

盒模型 / CSS 盒模型