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

最初的时候是看菜鸟教程学习的,菜鸟上的盒模型解释是这样的
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盒模型

相关文章:

  • 2021-09-10
  • 2021-11-23
  • 2022-12-23
  • 2021-06-24
  • 2021-05-12
  • 2022-02-22
猜你喜欢
  • 2021-05-14
  • 2021-11-25
  • 2021-11-27
  • 2022-12-23
  • 2021-06-12
相关资源
相似解决方案