盒模型之content-box和border-box的区别

标准盒模型（content-box）、ie怪异盒模型（border-box）、flex弹性伸缩盒模型、column多列盒模型

content-box计算公式：winth=width+padding+border

content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型

1.其实我们最常用的就是标准盒模型，标准盒模型写的width和height代表的是内容的宽高

2.padding和border都会撑大盒子，所以给了盒子padding和border之后，需要手动更改一下宽高

content-box：padding和border不被包含在定义的width和height之内。

盒子的实际宽度=设置的width+padding+border

border-box：怪异盒模型，低版本IE浏览器中的盒模型

怪异盒模型的好处，固定到border控制宽高，不用重新计算padding和border

ie盒模型，我们写的宽高是盒子的大小，当我们给盒子添加了padding与border值之后，
盒子的大小不会改变，会自动缩放内容，这个用起来比较方便，所以我在真实项目中大多数都使用IE盒模型。

border-box：padding和border被包含在定义的width和height之内。

盒子的实际宽度=设置的width（padding和border不会影响实际宽度，有效果，但不计算大小）

在做移动端开发的时候，多应用于flex弹性伸缩盒模型

总结

我们在理解的时候就要记住content-box是正常盒模型，border-box是怪异盒模型；
content-box正常的盒子模型：width+padding+border，盒子内所有属性相加得到最终盒子大小；
border-box怪异盒模型，就是你写个width：200px；后面无论padding和border你写多少，最终盒子宽度就200px，不会变大，不会加上padding和border的大小；也就是width包含了padding和border。