为什么W3C盒型号更好？

Question

为什么大多数开发人员认为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的盒子模型似乎反直觉.一些建议将非常感激.

谢谢!

Answer 1

一个字回答 - -box-sizing

您可以选择箱子模型的工作方式.

Answer 2

不是每个人都认为它更好.从Quirksmode中提取引用.

我个人觉得W3C的盒子模型反直觉.引用自己:

逻辑上,从边界到边界测量一个框.拿一个物理盒子,任何盒子.放入一个明显小于盒子的东西.要求任何人测量盒子的宽度.他将测量盒子两侧之间的距离("边界").没有人会想到测量盒子的内容.

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

我同意,这个border-box模型更有意义(至少,它对我有用).最初的W3C盒子模型存在争议,导致CSS3中box-sizing属性的定义.

Answer 3

就个人而言,我更喜欢 - 偶尔的羞耻 - IE的盒子模型.正如OP所指出的那样,有一个预定义的宽度,从中减去边距,填充和边框宽度似乎更有意义,而不是具有随后添加这些宽度的宽度.

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

Answer 4

虽然我发现 W3C 在大多数情况下都是正确的，但在这种特殊情况下，我不得不说 IE 的盒子模型更优越。

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