CSS中盒子模型的计算
标准盒子模型
- 构成：内容（文本、内容、宽高）、内间距、边框、外间距
- 内容代表元素的宽高（所占的宽高，设置的宽高）
- 增加了内间距和边框之后整体会放大，占位会增加
- 以上盒子模型如果遇到因内间距和边框增加之后而放大，还要手动减少宽度和高度，来保持总占位宽度的平衡（手动重新计算宽度）
- box-sizing: content-box;
- width = 宽度+左填充+右填充+左边框+右边框+左边距+右边距
- height = 高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
- 宽度 = 内容的宽度（content）+ 填充(padding) + 边框（border）+ 边界（margin）
怪异盒模型
- 宽度=设置的宽度+内间距+边框
- 当设置了box-sizing: border-box;相当于浏览器会重新计算真实元素宽度，不需要手动减少宽度了
- 怪异盒模型不光会包括boder的宽度还会包括padding的距离，这时，宽度将被减的更小
- width = 内容区域宽度 + 左右边距宽度
- height = 内容区域高度 + 上下边距高度
- 宽度 = 内容宽度（content+paddig+border）+ 边界（margin）
