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

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

最初的时候是看菜鸟教程学习的,菜鸟上的盒模型解释是这样的
W3C标准盒模型与IE盒模型区别

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

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

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

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

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

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

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

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