深入理解盒子模型

基本概念

盒子模型是传统布局(1)的核心思想之一，所有页面中的可视元素都可以看作是一个盒子。
我们可以从两个方面来理解盒子：首先是内部盒子，也叫容器盒子，其次是外部盒子。

*(1) 传统布局专指以 CSS2 为基础的布局方式，一般需要结合浮动、定位等技术手段实现布局，是目前浏览器兼容性最好的布局方式。与其对应的是以 Flex 和 Grid 为代表的新型布局。

如果 display 的属性值为 block、inline、flex、table 等等，可以认为是 block-block、inline-inline、flex-flex、table-table 的缩写。

内部盒子

内部盒子的结构

盒子的内部结构由四个区域组成，由内到外分别为：内容( Content )、内边距( Padding )、边框( Border )和外边距( Margin )。

四个区域的作用

1. 内容区域用来显示子元素，例如文本、图片等等。
2. 内边距用来隔离自身与子元素，区域的大小由 padding-top、padding-right、padding-bottom、padding-left 控制。
3. 边框用来显示自身，大小由 border-width 控制。
4. 外边距用来隔离自身与其他元素，区域的大小由 margin-top、margin-right、margin-bottom、margin-left 控制。

内部盒子的分类

标准盒子

display 属性值中，内部盒子对应的值为 block 和 inline，则认为是标准的盒子。
当然，值为 block 和值为 inline 的标准盒子在四个区域的计算上，也不尽相同：

1.值为 block 的盒子，内容区域的宽度默认为 100%，高度为 0；可以设置 Content、Padding、Border 和 Margin 四个区域的属性。
2.值为 inline 的盒子，内容区域的宽高默认为其子元素的宽高；并且，设置内容区域的宽高，和上、下外边距无效。

由于在计算总宽度上存在差异，因此将标准盒子也分为两类：

1. W3C 盒子：width 和 height 专指 Content 的宽度和高度。
2. IE 盒子：width 和 height 包含 Content、Padding 以及 Border 的宽度和高度。

目前主流浏览器默认都采用 W3C 盒子，但由于 IE 盒子在传统布局中仍然发挥作用，因此 CSS3 引入 box-sizing 属性，允许两种盒子互相切换。

1. content-box：使用 W3C 盒子，默认值。
2. border-box：使用 IE 盒子。

例子：

<style>
    div {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 10px solid red;
        margin: 10px;
    }
    
    div:first-child {
        box-sizing: content-box;
    }
    
    div:last-child {
        box-sizing: border-box;
    }
</style>

<div></div>
<br>
<div></div>

标记盒子

display 属性值为 list-item，则会生成一个标记盒子。
标记盒子主要用来放置列表元素( li )的项目符号。

其他盒子

常见的比如 Table 盒子、Flex 盒子、Grid 盒子等。
Table 比 CSS 出现的时间还早，而 Flex 和 Grid 则代表着未来的趋势，很多传统布局的思想和对内部盒子四个区域的理解，它们都有自己的一套理论。

外部盒子

块级盒子

display 属性值中，外部盒子对应的值为 block、flex、grid、table 等，以及特殊的 list-item，都属于块级盒子。
块级盒子的基本特点是，在标准文档流中(1)，独占一行，依次竖直排列。
默认情况下，外部盒子为块级的常见元素有 div、p、h1~h6、ul、ol、table、form 等。

*(1)所谓标准文档流，就是在不使用任何 CSS 的布局规则的情况下，浏览器默认呈现出来的一种布局标准。

例子：

<style>
    div,
    p,
    h1,
    ul,
    table,
    form {
        width: 200px;
        height: 100px;
        padding: 10px;
        border: 1px solid #ccc;
        margin: 15px;
    }
    
    /* table 默认使用IE盒子 */
    /* 使用下面的设置，统一使用W3C盒子 */
    /* 只简单测试了谷歌75，和 IE11 */
    table {
        /* 谷歌浏览器 */
        /* display: block; */
        /* IE 浏览器 */
        box-sizing: content-box;
    }
</style>

<div></div>
<p></p>
<h1></h1>
<ul></ul>
<table></table>
<form></form>

内联盒子

display 属性值中，外部盒子对应的值为 inline，则属于内联盒子。
内联盒子的基本特点是，在标准文档流中，可以和其它内联盒子在同一行内并列显示：自最左端横向排列，至最右端自动折行。
默认情况下，外部盒子为内联的常见元素有 span、a、strong、i、label、button、input、select、textarea、img 等，以及常见伪元素 ::after、::before、::first-letter、::first-line，文字本质上也属于内联元素。

例子1：

<style>
    span,
    a,
    strong,
    i,
    label {
        padding: 10px;
        border: 1px solid #ccc;
        margin-left: 15px;
        margin-right: 15px;
    }
</style>

<span>hello</span>
<a>hello</a>
<strong>hello</strong>
<i>hello</i>
<label>hello</label>

例子2：

<style>
    p::after {
        content: " world";
        background-color: yellow;
        color: red;
        font-weight: bold;
        margin-left: 5px;
        margin-right: 5px;
    }
</style>

<p>hello</p>

从作用上来说，块级盒子主要用于结构的搭建，内联盒子主要用于内容的展示。

内联盒模型

上文中，我们简单介绍了内联盒子的特点，这里将要介绍的"内联盒模型"则是对内联盒子的进一步扩展。
内联盒模型是一个内联盒子的集合，其中包括很多更为抽象的盒子：

内联盒子与内联级盒子

具有 display:inline 属性的盒子称为内联盒子，而具有 display:inline-block 等属性的盒子称为内联级盒子。两者的区别就是能否在同一个行内显示：内联盒子能够被拆分成多行，而内联级盒子不能拆分成多行。

例子：

<style>
    p:first-child {
        background-color: cadetblue;
    }
    
    p:last-child {
        background-color: darkgoldenrod;
    }
    
    p:last-child>span {
        display: inline-block;
    }
</style>

<p>
    盒子模型是传统布局的核心思想之一，<span>所有页面中的可视元素都可以看作是</span>一个盒子。
</p>
<p>
    盒子模型是传统布局的核心思想之一，<span>所有页面中的可视元素都可以看作是</span>一个盒子。
</p>

匿名盒子

有些盒子无法被 CSS 选择器选中，称之为匿名盒子。根据匿名盒子前后元素是块级还是内联，分为块级匿名盒子和内联匿名盒子。

行盒子

内联盒子或内联级盒子可以在同一行内并列显示，而每一行就是一个行盒子。如果内容较多，内联盒子出现换行的情况，就会出现多个行盒子。

例子：

<style>
    p {
        width: 150px;
    }
</style>

<p>盒子模型是传统布局的<strong>核心思想</strong>之一。</p>

标准内联元素与替换元素

在我们列举的内联元素中，有一些元素比较特殊，比如 img，其 Content 区域可进行替换：

<img src="1.jpg"> 

如果 1.jpg 换成 2.jpg，图片就会改变。类似的还有 video、canvas 和 iframe 等等。
还有一些元素，比如表单，由于诞生的时间比 CSS 还要早，所以时至今日依然有很多是无法添加样式的，比如多选框( checkbox )不能改变背景色。
上述这两类内联元素，统称为替换元素；除此之外，都可以称为标准内联元素。

替换元素的基本特点

替换元素在没有明确尺寸设定的情况下，有自己的默认尺寸。比如 video、canvas 和 iframe，默认宽高是 300px*150px，而表单元素，只要你在页面写上 input 标签，往往就会有默认的宽高、内边距、边框等属性。

---

如有错误，欢迎指正，本人不胜感激。