W3C标准盒模型与IE盒模型区别

今天被这两个盒模型搞得有点晕。。。。。。

最初的时候是看菜鸟教程学习的，菜鸟上的盒模型解释是这样的

刷面试题的时候牛客网上的盒模型的面试题答案是这样的

what？怎么同样是说盒模型的宽度，却是不同样的解释？接着我去MDN上搜，MDN上好像没IE盒子模型的解释，不知道是不是我没看清楚还是怎么的，但是我终于知道这是为什么了

接着，问题又来了，我太难了，这个IE模型究竟是怎么回事呢？然后我去看大神的博客结合书本，得知道两者的区别，看图

不难看出，两个盒子模型都有content，padding,border,margin,唯一的区别就是对元素尺寸的计算方式，标准盒子模型的盒子宽度=content+padding+border,而IE盒子模型的盒子宽度=content

为了避免盒子被撑开，CCS3中增加了一种能够更改盒子的属性：box-sizing,它有两个属性值：
（1）content-box:对应W3C盒模型
（2）border-box:对应IE盒模型