为什么认为 W3C 盒子模型更好？ [关闭]答案

【问题标题】：Why is the W3C box model considered better? [closed]为什么认为 W3C 盒子模型更好？ [关闭]
【发布时间】：2011-01-26 15:41:25
【问题描述】：

为什么大多数开发人员认为 W3C box model 比 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 的盒子模型似乎违反直觉。

【问题讨论】：

TL;DR，但回答主题：因为 W3C 本质上是一个标准，人们不喜欢微软打破所有标准的方式。
好问题。我个人认为（有一次）微软的做法是正确的，但我将浏览器战争归咎于两个阵营。也许 wc3 应该通过定义一个新的文档类型来迎合微软的方法，让设计人员可以选择他们希望实现的盒子模型。
顺便说一句，有一种非常简单的方法可以解决填充破坏布局的问题。那就是遵循这个简单的口头禅：宽度被添加到容器中......填充被添加到容器内的内容中。你的布局永远不会中断。永远。

标签： layout css

【解决方案1】：

并不是每个人都认为它更好。从Quirksmode 中提取报价。

我个人认为 W3C 的盒子模型违反直觉。引用我自己的话：

从逻辑上讲，一个盒子是从一个边界到另一个边界测量的。拿一个物理盒子，任何盒子。在里面放一些明显小于盒子的东西。请任何人测量盒子的宽度。他将测量盒子两侧之间的距离（“边界”）。没有人会想到测量盒子的内容。

为保存内容而创建盒子的网页设计师关心盒子的可见宽度，以及从边框到边框的距离。边界，而不是内容，是网站用户的视觉提示。没有人对内容的宽度感兴趣。

我同意，border-box 模型更有意义（至少，它对我有用）。最初的 W3C 盒子模型存在争议，导致 CSS3 中box-sizing property 的定义。

【讨论】：

我发现 border-box 在某些情况下很有用，但我从未遇到过 CSS1 模型的问题：每个元素都会创建多个嵌套框无论它们是否可见 width 描述了原始（最里面的）盒子。 width: 30em 适合 30em 长的线条，width: 320px 适合里面的 320px 图像。

【解决方案2】：

虽然我发现 W3C 大部分时间都是正确的，但在这种特殊情况下，我不得不说 IE 的盒子模型更胜一筹。

我经常遇到的一个常见问题是当我想将宽度设置为百分比并同时具有像素填充时。为了让一个 div 拉伸到 100% 并添加填充，我不得不使用两个 div 而不是一个 - 否则在一个 div 上应用 100% 实际上会比你预期的更多。这使得使用流畅的布局变得非常困难。

【讨论】：

【解决方案3】：

如果您总是对框使用填充、边框和边距，则 IE 模型可能看起来更好、更合乎逻辑，但这种情况很少见。是的，WC3 盒子模型稍微复杂一些，但它在可能性和对布局的严格“像素”控制方面得到了回报。一旦你用盒子模型做了足够多的布局，你就会习惯它安静地很好，一旦你探索了它的力量，你就永远不会想把 IE 错误看作是做 web 布局的更好方法。相信我，去过那里。

【讨论】：

如果您在回答中提供了任何细节，我们将不会必须信任您。

【解决方案4】：

与其说是哪个更好或更坏的问题，不如说是哪个遵循公认组织的标准，哪个不是..

另一方面，您的问题是有人希望将他的文本包装在一个 300 像素的容器中，该容器与下一个容器的距离为 10 像素。现在您必须按照您的示例进行相同的计算才能按顺序计算宽度..这是你如何看待同样问题的一个例子..

【讨论】：

“卢克，你会发现我们所坚持的许多真理很大程度上取决于我们自己的观点。” =b
@ricebowl，哈哈。力量在你内心深处运行..
用边距解决，从未添加到宽度

【解决方案5】：

一句话回答--box-sizing

You choose how you want your box model to work.

【讨论】：

还有很多我什至从未怀疑可能存在的 css... +1 为那个（现已添加书签的）链接 =)
我在同一条船上。顺便说一句，这个模板布局模块（CSS3 的一部分）是我见过的最酷的 CSS。 w3.org/TR/2009/WD-css3-layout-20090402
@Anurag，我突然对 CSS3 更加乐观了。希望它至少在 html5...=) 后尽快实现
@ricebowl 看到 w3 的工作方式再次证明了我对委员会的信心 :) .. 他们正在做一些非常出色的事情
嗯...看到 W3 主要工作的方式肯定了我的对委员会的信心。虽然我会把它交给他们，而且很高兴，我阅读和听到的关于 html 5 和 css 3 的内容越多，我就越快乐 =)

【解决方案6】：

就我个人而言，我更喜欢——而不是偶尔感到羞耻——IE 的盒子模型。正如 OP 所指出的，似乎有一个预定义的宽度，从中 减去边距、填充和边框宽度，而不是有一个宽度然后添加。

另一方面，我可以非常愉快地使用这两种模型，我真正想要的只是实现之间的一致性，无论选择哪种实现。

【讨论】：

有一次我不小心为 IE 的盒子模型编写代码并成为它的粉丝。这是一个盒子的完美逻辑。让 W3C 经营一家集装箱运输公司，一周后就倒闭了。
@Nirmal，是的。我认为这与 PPK 在 Quirksmode 链接中所做的基本相同。我打算引用它，但是当我想起它在哪里时，@Anurag 和我认为 @Andy E. 已经链接/引用了，所以它似乎是多余的。我接受规范总是任意的，但如果它也是理性的也很好。
@Nirmal，更不用说当他们同意运输清单、装货单、时间表和路线时，你会看到类似 2025 年的东西才能拿到书2004 年订购... =)