今天我来写个文章， 说说那个box-sizing是啥玩意儿，还有它咋改了盒模型的计算方法。这东西其实挺有用的，特别是你搞前端的时候，能让你少点麻烦，扎心了...。

啥是box-sizing

box-sizing这个属性就是说咱们给一个元素设置的宽度和高度到底算不算padding和border。默认情况下 浏览器用的是content-box，就是你给div写个width: 100px，那它就只算内容区域是100px，padding和border都得再说一个加，YYDS...。

但是呢， 如果你用了border-box，那宽度和高度就会包括padding和border，这样你就不用自己去算多出来的那部分，布局起来方便多了，啥玩意儿？。

content-box 和 border-box 有啥区别

content-box是默认的， 就是你写width的时候，它只算内容区域的宽。比如你写width: 100px， 然后加了padding: 10px，border: 5px，那它实际占的地方就变成120px + 10px = 130px。这很烦，主要原因是你得自己算，简直了。。

KTV你。 border-box就不一样了它会把width和height包括padding和border都算进去。比如你写width: 100px，那这100px就是总的宽度，包括了padding和border。这样你就不用再手动算那些多出来的部分了省心多了。

为啥要用border-box

主要原因是content-box有时候会让人头大， 你得自己算padding和border，一不小心就撑破了容器。所以现在好多人都喜欢用border-box，这样设置起来简单点，也不容易出错，未来可期。。

怎么设置box-sizing

你可以在CSS里写：

* {
    box-sizing: border-box;
}

这样所有元素都用border-box了不用一个一个去设。这个通配符选择器*挺方便的，能保证所有东西都统一用一个模型，不容易乱。

box-sizing的好处

用了border-box以后 你设的width和height就是元素的总大小，不用再加padding和border。比如你写width: 100px， 那它就是100px，不会主要原因是加了padding和border就变大。

这样你写样式的时候，就不用再算来算去了直接写上就行。比如你写个导航栏， 每个item宽度100px，padding 10px，border 1px，那它就是120px。你不用再加20px了省事，好吧好吧...。

怎么用border-box做布局

比如你写个div， 宽度100px，padding 10px，border 1px，那它就是120px。 太硬核了。 你不用再算padding和border，直接写上就行。这样你写样式的时候，就不用再加来加去，省事。

这家伙... box-sizing这个属性就是让你控制元素的大小， content-box是默认的，就是你写width的时候，它只算内容区域的宽。border-box就不一样了它会把width和height包括padding和border都算进去。这样你写样式的时候，就不用再算padding和border，省事。