为什么W3C盒模型被认为更好?

38

为什么大多数开发者认为W3C的盒子模型比Internet Explorer使用的更好?

在Internet Explorer上开发页面时,很容易感到沮丧,因为它们通常不会像你想要的那样显示。但我发现W3C的盒子模型很难理解。例如,如果将外边距、内边距和边框纳入宽度计算,我可以为所有列分配宽度值,而不必担心列数以及对它们的内边距和外边距进行任何更改。

使用W3C盒子模型时,我必须考虑到列数,并开发一种类似于数学公式的方法来计算正确的宽度值,当修改内边距和外边距时这将变得困难,特别是对于复杂的布局。请考虑我写的这个小框架:

#content {
    margin:0 auto 30px auto;
    padding:0 30px 30px 30px;
    width: 900px;
}

    #content .column {
        float: left;
        margin:0 20px 20px 20px;
    }
    #content .first {
        margin-left: 0;
    }
    #content .last {
        margin-right: 0;
    }

        .width_1-4 {
            width: 195px;
        }
        .width_1-3 {
            width: 273px;
        }
        .width_1-2 {
            width: 430px;
        }
        .width_3-4 {
            width: 645px;
        }
        .width_1-1 {
            width: 900px;
        }
我在这里分配的值只能在有三列且边距为 0+20+20+20+20+0 的情况下才能正常工作。要修改填充和边距会很困难,需要重新计算整个宽度。如果列宽包括填充和边距,我只需要改变宽度就可以布局了。我不是在批评盒子模型,而是希望理解为什么它被认为更好,因为我发现使用它很困难。

我做错了什么吗?使用 W3C 盒子模型似乎与直觉相反。


2
简而言之,答案是:因为W3C本质上是一个标准组织,人们不喜欢微软违反所有标准的做法。 - Tronic
1
好问题。我个人认为(这一次)微软做得很对,但我责怪双方在浏览器战争中的行为。也许WC3应该通过定义一个新的文档类型来适应微软的方法,让设计师选择他们想要实现的盒模型。 - stephenmurdoch
4
顺便说一下,有一个非常简单的方法来解决填充破坏布局的问题。那就是遵循这个简单的口诀:容器宽度增加...容器内的内容增加填充。您的布局将永远不会破裂。永远都不会。 - stephenmurdoch
6个回答

20

1
还有很多CSS我甚至从未想到过可能存在...为那个(现在已经被收藏的)链接点赞 =) - David Thomas
1
我和你一样。顺便说一下,这个模板布局模块(CSS3的一部分)是我见过的最酷的CSS东西。http://www.w3.org/TR/2009/WD-css3-layout-20090402/ - Anurag
嗯...看到W3的工作方式大多是有效的,这让我对委员会有了信心。虽然我要承认,越是读到和听到HTML 5和CSS 3的内容,我就越开心 =) - David Thomas
感谢大家的建议。但是在Internet Explorer 8中指定自己的box-sizing不起作用(具有讽刺意味的是,它现在坚持使用W3C模型),除非我从页面头部删除!Doctype。我不知道这样做是否会对页面产生负面影响。 - Mohamad
笑死了@ricebowl,网站开发不是一门科学,也不是一门艺术。它是拥抱这个世界的混乱,并放弃所有试图将其抽象化的库的哲学。一个真正的忍者总是会无所畏惧地编写代码if(IE5) {..} else if(IE6) {..} else if(IE6.1) {..} else if(FF1.5.2) {..}等等。 - Anurag
显示剩余7条评论

13

并不是每个人都认为它更好。从Quirksmode中摘取一句引用。

就我个人而言,我认为W3C的盒模型很反直觉。引用自己的话:

从逻辑上讲,一个盒子是从边框到边框来测量的。拿一个实体盒子,任何盒子。在里面放置一个明显比盒子小的物品。请任何人测量盒子的宽度。他会测量盒子两侧之间的距离(“边框”)。没有人会想到测量盒子的内容。

创建用于容纳内容的盒子的Web设计师关心盒子的可见宽度,即从边框到边框的距离。边框而不是内容是网站用户的视觉提示。没有人对内容的宽度感兴趣。

我同意,border-box模型更有意义(至少对我来说是这样)。原始的W3C盒模型存在争议,导致在CSS3中定义了box-sizing属性


我发现在某些情况下border-box很有用,但我从未遇到过CSS1模型的问题:每个元素都会创建几个嵌套的盒子无论它们是否可见,而width描述了原始(最内层)盒子。 width: 30em将适合30em长的行,而width: 320px将使320px的图像适合其中。 - sam

8
个人而言,我更偏向于 - 有时会有些难堪 - IE 盒模型。正如 OP 所指出的那样,从一个预定义宽度中减去 margin、padding 和 border-width 似乎比在一个宽度上加上这些值更合理。
另一方面,我可以轻松地同时使用两种模型,我真正想要的是不管选择哪种实现方式都要保持 一致性

10
有一次无意中开始编写适用于IE盒模型的代码,从此成为了它的粉丝。那是一个完美的盒子逻辑。让W3C去经营一个集装箱船运公司,一周内就会破产。 - Nirmal
@Nirmal,是的。我认为这基本上与PPK在Quirksmode链接中提出的论点相同。我本来想引用它的,但等我记起它在哪里时,@Anurag和我想@Andy E.已经链接/引用了,所以似乎有点多余。我承认规范总是会武断的,但它也应该是合理的。 - David Thomas
@Nirmal,更不用说等到他们同意运输清单、装载订单、日程安排和路线,你要想在2004年订购的书籍,可能要等到2025年才能收到... =) - David Thomas

5

虽然我认为W3C大多数情况下都是正确的,但在这种特定情况下,我不得不说IE的盒模型更优秀。

我经常遇到的一个常见问题是,当我想将宽度设置为百分比并添加像素填充时。要让div拉伸到100%并添加填充,我必须使用两个div而不是一个 - 否则,在单个div上应用100%实际上会超出您在考虑填充后所期望的范围。这使得使用流体布局变得非常困难。


2

这并不是哪个更好或更差的问题,而是哪个遵循了来自被接受组织的标准,哪个没有。

另一方面,你的问题可能是有人想要将他的文本包裹在一个宽度为300像素、与下一个容器相隔10像素的容器内。现在你需要进行与你的示例相同的计算,以计算宽度。这是如何看待同样的问题的情况。


4
卢克,你会发现我们坚信的许多真理在很大程度上取决于我们自己的观点。 - David Thomas
1
@ricebowl,哈哈。深处潜藏着你的力量... - Gabriele Petrioli
1
这是一个通过添加边距来解决的问题,而这个边距从未被加到宽度上。 - Pherrymason

-3

如果你总是对一个盒子使用填充、边框和外边距,IE 模型可能看起来更好、更合乎逻辑,但这很少发生。 是的,WC3 盒模型有点复杂,但它在布局的可能性和严格的“像素级”控制方面回报颇丰。 一旦你用盒模型做了足够多的布局,你就会很快习惯它,一旦你探索了它的强大之处,你就永远不会考虑 IE 的 bug 是做网页布局的更好方式。相信我,我也曾经历过这个阶段。


5
如果你在回答中给出任何具体细节,我们就不需要完全信任你。 - mhsmith

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接