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

最后都变了- 提交于 2020-01-26 03:06:33

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

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

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

图片

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盒模型

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!