两种盒模型的区别

标准盒模型与怪异盒模型

1.标准盒模型
标准盒模型是 box-sizing: content-box , 默认值，他的width就是content的width，盒子总宽度=margin+padding+width+border，盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素，就像气球一样，大小随内容的变化而变化

Content-box图像：

2.怪异盒模型
怪异盒模型：box-sizing: border-box，也是 IE盒子，父元素的盒模型确定，子元素无法撑开父元素的盒模型
可以理解为现实生活中的铁箱子，大小不能被内容改变。

此时的 width=content+padding+border

盒子总宽度=width+margin

border-box图像：