重要性
在源代码中通过 <tag> 描述语义 Element 在页面中具体表现为 Box
盒模型是排版和渲染的基本单位。
盒模型的组成
- content
- padding
- border
- margin
box-sizing
盒模型的大小和生活中盒大小的概念是有偏差的。
例如：在盒模型设置宽度 width 时，默认设置的是 content 的宽度；而在生活中说一个盒子的大小是指整个盒子，并非内部的空间大小。
这样就会导致在UI还原的过程中出现问题。
- content-box: width = content
- border-box: width = content + padding + border
