在网页中，所有的元素都可以看作一个个的"盒子"，这样的"盒子"可以分成四类：块盒、行盒、行块盒和可替换元素。
其中，可替换元素可能是块盒、行盒或者行块盒，除可替换元素之外，所有的元素都是非可替换元素。
然后根据这些盒子的性质，官方给我们抽象出了两种模型，即标准盒模型和替代盒模型。
理解盒模型，有助于我们完成复杂的布局任务。
先来看看四种盒子，以及它们具有哪些性质：
块盒
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
- width 和 height 属性可以发挥作用
- 内边距, 外边距和边框会将其他元素从当前盒子周围“推开”
行盒
- 盒子沿着内容延伸，它的宽高取决于内容的多少
- 盒子不会产生换行
- width 和 height 属性将不起作用，调整行和的宽高，应该使用字体大小、字体类型、行高间接调整
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他的盒子"推开"，水平方向的内边距、外边距以及边框会被应用且会把其他的盒子"推开"
行块盒
- 盒子沿着内容延伸，它的宽高取决于内容的多少
- 盒子不会产生换行
- width 和 height 属性可以发挥作用
- 内边距, 外边距和边框会将其他元素从当前盒子周围“推开”
可替换元素
- 可替换元素的性质与行块盒一致
解释一下什么是可替换元素:
官方的解释过于复杂，我表示没看懂(麻烦懂的兄弟给我解释一下!)。
对此，我印象比较深刻的有两点，一是可替换元素在页面中显示的结果取决于它的属性，二是除了少数可替换元素之外，都是非可替换元素。
所以，不懂也没关系，那就记得一些常用的可替换元素好了！🐶
有哪些可替换元素？
- 典型的可替换元素有：iframe、video、embed、img。
- 仅在特定情况下被作为可替换元素有：option、audio、canvas、object、 "image" 类型的 input。
- 用 CSS content 属性插入的对象是匿名的可替换元素。
再来看看两种盒模型：
标准盒模型
标准盒模型的结构由四部分组成：
内容区：width、height、min-width、max-width、min-height、max-height 属性指定。
内填充：padding、padding-top、padding-right、padding-bottom、padding-left 属性指定。
边框：border、border-width 属性指定。
外边距：margin、margin-top、margin-right、margin-bottom、margin-left 属性指定。
在标准盒模型中，如果你给盒设置 width 和 height，实际设置的是内容区(content box)，padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
替代盒模型
css 还有一个替代盒模型，使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分(不包括外边距)。
默认浏览器会使用标准模型，如果需要使用替代模型，你可以通过为其设置 box-sizing: border-box 来实现。
盒模型的使用方式
盒模型所有的属性都完全适用于块盒和行块盒，但只有部分属性可以应用于行盒。
比如，在行盒中，宽度和高度将被忽略，外边距、内边距和边框是生效的，但它们不会改变其他内容与行盒的关系(即不会把其他的盒子"推开")。
总结一下吧：
网页是由一个个盒子布局组成的，了解盒子分类、盒子结构、盒子性质，才能更好的使用盒子在页面中进行排列组合，画出稳定而优美的页面。
而且，善于使用这些知识，可以让我们在某些时候，进行优雅的实现。
举个例子，根据块盒默认占据整行空间的性质，当它的padding、border、margin改变时，它的content的宽度也会随着变化，如果想让网页两端固定宽度，中部自适应时(一种典型的布局方式)，我们只需要为网页设置固定宽度的padding(或者是border)，那么它的content就会自适应了。
