为什么大多数开发人员认为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的盒子模型似乎反直觉。一些建议将非常感激。
谢谢！
答案 0 :(得分：19)
单词回答 - -box-sizing
答案 1 :(得分：13)
不是每个人都认为它更好。从Quirksmode中提取引用。
就我个人而言，我发现W3C的盒子模型与直觉相反。引用自己：
逻辑上，从边框到边框测量一个框。拿一个物理盒子，任何盒子。放入一个明显小于盒子的东西。要求任何人测量盒子的宽度。他将测量盒子两侧之间的距离（“边界”）。没有人会想到测量盒子的内容。
创建用于保存内容的框的网页设计师关心框的可见宽度，关于从边框到边框的距离。边框而不是内容是网站用户的视觉提示。没有人对内容的宽度感兴趣。
我同意，border-box模型更有意义（至少，它对我有用）。最初的W3C盒子模型存在争议，导致CSS3中box-sizing property的定义。
答案 2 :(得分：8)
就个人而言，我更喜欢 - 偶尔羞耻 - IE的盒子模型。正如OP所指出的那样似乎更有意义的是有一个预定义的宽度，边距，填充和边框宽度减去，而不是宽度为然后添加。
另一方面，我可以非常愉快地使用这两个模型，我真正想要的是实现之间的一致性，无论选择哪种实现。
答案 3 :(得分：4)
虽然我发现W3C在大多数情况下都是正确的，但在这个特殊情况下，我不得不说IE的盒子模型更胜一筹。
我经常遇到的一个常见问题是，当我想将宽度设置为百分比并且还具有像素填充时。为了让div伸展到100％并添加填充，我被迫使用两个div而不是一个 - 否则在单个div上应用100％实际上会比填充因素后的结果更多。这使得使用流体布局变得非常困难。
答案 4 :(得分：2)
这不是一个更好或更糟的问题，而是遵循一个被接受的组织的标准而不是......
另一方面，你的问题就是那些想要将他的文本包裹在300px容器内的人，该容器与下一个容器的距离为10像素。现在你必须按照顺序进行相同的计算计算宽度..这是你如何看待同样的问题..
答案 5 :(得分：-3)
如果你总是在框中使用填充，边框和边距，那么IE模型可能看起来更好更合理，但很少会出现这种情况。 是的，WC3的盒子模型稍微复杂一点，但它在可能性和对布局的严格“像素”控制方面有所回报。 一旦你使用盒子模型制作了足够的布局，你就可以很好地习惯它了，一旦你探索它的力量，你就永远不会想到IE-bugs是一种更好的网页布局方式。相信我，去过那里。