尺寸计算

box-sizing

box-sizing 是 CSS 里一个非常重要的属性，用来决定 浏览器如何计算元素的宽高（width / height）。

常见取值

属性值	计算方式	含义说明
content-box（默认）	width = content	只计算内容区，不包含 padding 和 border
border-box	width = content + padding + border	宽高包含内边距和边框，盒子总宽固定
inherit	继承父元素的 box-sizing	—

通常设计图的盒子是固定宽高的和内边距的，我们需要计算内容区的大小，这很麻烦。为此我们可以设置盒子的尺寸计算方式为border-box。确保盒子的尺寸符合我们的设计图

box-sizing: border-box;