box-model bug和新的box-sizing CSS有什么区别?

时间:2012-04-23 03:00:34

标签: css3 css

在某些日子里(对于某些人来说已经很久了,而对其他人来说仍然存在),盒子模型的错误对他们的存在是一种祸害。元素的宽度包括边缘,边界和填充的想法是亵渎神灵和对他们的感官的憎恶。所以我们在成千上万的互联网博客关于盒子模型破解之后就摆脱了它。

现在我们得到box-sizing,等待它,允许你指定宽度包含边框,边距和填充。我们为它创造了一个时髦的新名称,“CSS3 Flexbox”,现在它是设计师一直在寻找的自由。

对于那些看到盒子模型错误而不是bug而W3C作为实际错误的逻辑人员,这是一个惊喜。重新引入这个所谓的bug,现在我们称之为增强功能?

那么有人可以解释为什么会有所不同吗?我老老实实地对此感到困惑。

1 个答案:

答案 0 :(得分:4)

  

现在我们得到box-sizing,等待它,允许你指定宽度包含边框,边距和填充。我们为它创造了一个时髦的新名称,“CSS3 Flexbox”,现在它是设计师一直在寻找的自由。

不,我们称之为“边框”模式。 Flexbox是完全不同的事情;它与box-sizing property无关,W3C content box model用于告诉浏览器如何计算框的尺寸。

  

对于那些看到盒子模型错误而不是bug而W3C作为实际错误的逻辑人员,这是一个惊喜。重新引入这个所谓的bug,现在我们称之为增强功能?

     

那么有人可以解释为什么会有所不同吗?我老老实实地对此感到困惑。

它曾经被认为是一个很长一段时间的错误,因为当时只有一个真的盒子模型(IE was the black sheep),当CSS刚刚开始拾取时,每个人都必须遵循这个模型,并且那个时间people — even those who hated IE's guts — liked this bug, and so border box sizing was added into the CSS3 spec as an option。但后来padding box model being explored by Mozilla。简单明了。 1

请注意,IE5.x(以及quirks模式IE 2 )将始终继续显示错误的行为,因为任何版本的规范和旧版本的其他浏览器不支持box-sizing的人将始终遵循标准模式下的原始内容框模型(有时,但并非总是如此,在几乎标准模式下)。


1 现在至少有两个,原始的W3C内容盒模型和“新”边框盒模型。还有第三个{{3}},但这与我们在这里讨论的内容并不相关,而且还有可能从CSS3 UI CR中删除。

2 根据您的要求,这可能会被视为“功能”,因为怪癖模式的主要目的是模拟错误的浏览器呈现用于遗留代码,并且不适用于新代码。