box-sizing 属性

元素的宽度与高度，在默认情况下的计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度

以上两个 div 元素虽然宽度与高度设置一样，但真实展示的大小不一致，因为 红色边框div 指定了内边距.

在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中,因为box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)

在元素上设置了 box-sizing：

页面推荐初始化配置：

* {
    box-sizing: border-box;
}