box-sizing理解

元素宽度：在浏览器中显示的占位宽度。
在浏览器的默认计算方式下，块状元素的width = content宽度 + 左右padding + 左右border + 左右margin。

反默认浏览器计算方式：如果我们不想要浏览器按照这种计算方式计算宽度，则要用到CSS3中的bos-sizing属性。box-size的取值为:content-box/padding-box/border-box。

(1)content-box(w3c标准):这种计算方式要求将浏览器width属性应用到content上，所以计算方式与浏览器一样 ，没必要设置。
(2)padding-box:这种计算方式中width属性 = content宽度 + padding宽度*2。
(3)border-box（传统IE浏览器）:将width属性应用到border区域（包含border大小），width = content宽度 + border宽度*2 + padding宽度*2，border变化只影响content宽度。

 

语法：

Formal syntax: content-box | padding-box | border-box

box-sizing属性取值
content-box

这是默认样式指定CSS标准。测量width和height属性只包括的内容，但不是border, margin, 或者 padding。

padding-box

width和height属性包括padding的大小，不包括border和margin。

border-box

width和height属性包括padding和border，但不包括margin。

 

CSS Tricks:https://css-tricks.com/box-sizing/