https://segmentfault.com/a/1190000014692461
盒子模型简单点理解就是外边距(margin)+边框(border)+内边距(padding)+内容(content)
每一个元素其实是包含了一个“外在盒子”和一个“内在盒子”，其中“外在盒子”负责元素是一行显示还是换行显示，而“内在盒子”则负责宽高、内容展现。如：
inline-block =》（inline对应于“外在盒子”，block对应于“内在盒子”）
block =》 block-block
行盒子 -》行框盒子 -》内联盒子 -》内容区域
- 内容区域(content area)
内容区域指的是一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子(character box)；但是图片这样的替换元素，其显示内容不是文字，因此内容区域可以看成是元素自身。
content-area 即围绕文字看不见的 box，其大小与 font-size 有关，可以看成是鼠标选中文字后高亮的背景色区域
- 内联盒子(inline box)
“内联盒子”不会让内容成块显示，而是排成一行，这里的内联盒子指的是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”。
- 行框盒子(line box)
每一行就是一个行框盒子，每个行框盒子都是由一个个内联盒子组成，注意：line-height是作用在行框盒子上的，并最终决定高度(替换元素除外，后面会讲解什么是替换元素)。
- 行盒子(containing box)
此盒子由一行一行的“行框盒子”组成（css规范中，并没有“包含盒子”的说法，更准确的称呼是“包含块”(containing block)。
- height的默认值也是auto
指的是其高度由内部元素堆叠而成，内部元素盒子有多高，元素就有多高。但在绝对定位中，若同时设置了top与bottom，则其高度由父盒子高度减去top与bottom。
- height: 100%。
如果父元素height为auto，则子元素height:100%是无效的，要想子元素height: 100%生效，则：
父元素设定显式高度值 使用绝对定位（绝对定位元素的百分比是根据padding box计算的，非绝对定位元素百分比是根据content box计算的）
根据“外在盒子”是内联还是块级，我们把元素分为内联元素和块级元素，而根据内容是否可替换，我们把元素分为可替换元素和非替换元素。
<img>，<video>，<canvas>，<input>，<textarea>，<iframe>都是替换元素。
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。