盒子模型…
1. 简单盒模型
我在查资料的时候,看到一篇文章很好的说明了两种模型的关系:
通常情况下,被更多人认知的盒模型就是简单盒模型,简单盒模型在早期IE时期有一种怪异模式下的解析方式,也就是现在的border-box,后来W3C制定的标准以后规定在标准解析模式下使用标准盒模型(content-box)。
文中有这样一个段子:
IE:我觉得盒模型应该是这样的,blahblah。
W3C:明显应该是这样的才对,blahblah。
结果是 IE 在怪异模式下用了「不标准」的盒模型,标准模式下用了「标准」的盒模型。
围观群众:听说 IE 的盒模型不标准。
……多年过去……
W3C:感觉还是 IE 的那个模型比较好。但我们已经回不去了……算了加个属性支持一下 IE 那种模式吧。box-sizing
这货就是用来擦屁股的,我从来没见过有人用padding-box
的……
作者:顾轶灵
链接:https://www.zhihu.com/question/25509268/answer/30949718
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
2. 测试代码
代码放在文末
运行结果:
3. box-sizing: content-box
4. box-sizing: border-box
5. 总结
在浏览器中,box-sizing 默认是 content-box
content-box(标准盒模型)
width = 内容的宽度
height = 内容的高度border-box(怪异盒模型)
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
6. 参考材料
7. 测试代码
1 |
|