- 第一种盒模型是 content-box
- width 指定的是 content 区域宽度，而不是实际宽度
- 公式：
实际宽度 = width + padding + border
- 第二种盒模型是 border-box
- width 指定的是左右边框外侧的距离
- 公式
实际宽度 = width
为什么有盒模型
所有 HTML 元素，都可以看做盒子
一个盒子包括：外边距、边框、内边距、内容区域，如图：
box-sizing
有两个元素：
- content-box
- 默认值，IE 标准
- 一个元素的实际宽度是 宽 + 内边距 + 边框
- border-box
- 告诉浏览器：我想要设置的边框和内边距是包含在 width 内的
- 大多数情况下，这使得我们更容易设定一个元素的宽高
我一般用 border-box，因为这种写起来更方便，content-box 还需要计算
