对box-sizing border-box的理解：

对box-sizing: border-box的理解：

核心：当设置border-box后，盒子大小的计算方式改变为：

• width = border + padding + 内容的宽度
• height = border + padding + 内容的高度

对比：

box-sizing : content-box ：（标准盒子模型）一般浏览器默认为标准盒子模型。

其div的大小计算： 例如给一个div设置宽高为500px，实际上你设置的只是content,然后你又设置了padding:10px;border:1px solid red;

这时div的宽高就会变为522px（content 500px + padding 20px + border 2px）

box-sizing :border-box ：（怪异盒子模型）可根据实际项目需要自行设置。

此时：padding和border的值就不会再影响元素的宽高，相当于把padding和border的值都算在content

其div的大小计算： 例如给一个div设置宽高为500px，实际上你设置的是padding+border+content，然后你又设置了padding:10px;border:1px solid red;

这时div的宽高还是500px（content 478px + padding 20px + border 2px）