box-sizing: border-box

box-sizing主要有两个值content-box和border-box，先看下官方的解释：

通俗一点来说，默认情况下，padding和border是会额外占据空间的，假如元素宽是10px，如果设置了1px border边框，实际的宽就是12px，padding同理。那么这样会导致，布局的宽高不好控制，计算也特别麻烦。所以我们会给全局的元素用上border-box， 只要设置了宽高，那么border和padding无论怎么变化，元素的宽高都不会变，这样方便布局和计算。