每个元素都有两个盒子，外在盒子和内在盒子。
- 外在盒子负责元素是可以一行显示，还是只能换行显示；
- 内在盒子负责宽高、内容呈现
“内联盒子” ——无法定义宽高，多个内联盒子会在一行显示，
“块级盒子” ——可以定义宽高，每个块级盒子都独占一行，多个块级盒子只能换行显示，
“块级容器盒子” —— 可以定义宽高，多个块级容器盒子会在一行显示
- display：block 的元素由外在的“块级盒子”和内在的“块级容器盒子”组成。
- display：inline-block 的元素由外在的“内联盒子”和内在的“块级容器盒子”组成
- display：inline 的元素内外都是“内联盒子”
- display：inline-table 的元素由外在的“内联盒子”和内在的“table盒子”组成，得到一个可以和文字在一行显示的表格
内在盒子并不是一个简单的矩形，而是由content，padding，border，margin（透明）四层嵌套构成的。
即“内在盒子”又被分成了4个盒子，分别是content box、padding box、border box和margin box。
- margin是透明的，无法设置背景，垂直方向的两个元素的margin还存在合并的情况（margin的塌陷）
- width属性默认作用于content box上，所以元素最终的宽度offsetWidth = width + 2 *padding + 2 *border
- height属性默认也作用于content box上，所以元素最终的高度offsetHeight = height+ 2 *padding + 2 *border
box-sizing 属性
box-sizing 属性可以改变width和height的作用对象，默认box-sizing 属性的值为content-box
通过设置 box-sizing: border-box; 可以让width和height作用于border box上，此时元素最终的宽度offsetWidth = width，元素最终的高度offsetHeight = height
box-sizing 属性被发明出来最大的初衷是解决替换元素宽度自适应问题（替换元素的尺寸由内部元素决定，且无论其display属性值是inline还是block，常见的替换元素有 input, textarea, img, video, object ）
所以，通常我们会在全局样式中添加下方代码
input, textarea, img, video, object { box-sizing: border-box; }
