您最喜爱的技术社区。浏览所有集合
与Stack Overflow for Teams一起提问、寻找答案并进行协作。
与Stack Overflow for Teams一起提问、寻找答案并进行协作。探索团队
找到集中、可信的内容，围绕您最常用的技术进行协作。
团队
工作问答
在一个结构化且易于搜索的位置内连接和共享知识。
尽早访问并查看新功能的预览。
为什么大多数开发人员考虑W3C箱式模型比Internet Explorer使用的方框模型更好？
开发在Internet Explorer上看起来像你想要的页面是非常令人沮丧的，但我发现W3C盒子模型违反直觉。例如，如果在宽度中考虑了边距、填充和边框，我可以为所有列分配宽度值，而不必担心列数以及对填充和边距所做的任何更改。
使用W3C的box模型，我必须担心我的列数，并开发类似于数学公式的东西来计算修改边距和填充时的正确宽度值。更改它们的值很困难，尤其是对于复杂的布局。想想我写的这个小框架：
#内容{边距：0 auto 30px auto；填充：0 30px 30px 30 px；宽度：900px；}#content.列{浮动：左；边距：0 20px 20px 20 px；}#内容。首先{边缘左侧：0；}#内容。最后{右侧边距：0；}.宽度_1-4{宽度：195px；}.宽度_1-3{宽度：273px；}.宽度_1-2{宽度：430px；}.宽度_3-4{宽度：645px；}.宽度_1-1{宽度：900px；}
除非有三列，否则我在这里指定的值将不稳定，因此在0+20+20+20+20+0.很难修改填充和边距；我的整个宽度必须重新计算。如果列宽包含了填充和边距，我只需要更改宽度，就可以得到我的布局。我很少批评盒子模型，更希望理解为什么它被认为更好，因为我发现它很难使用。
0+20+20+20+20+0
我做错了吗？使用W3C的盒子模型似乎违反直觉。
一个单词的答案--箱体尺寸
-箱体尺寸
你可以选择你想要的盒子模型的工作方式.
并不是每个人都认为它更好。从中提取引用Quirksmode（奇怪模式）.
就我个人而言，我发现W3C的盒子模型与此相反。引用我自己的话： 从逻辑上讲，框是从一个边框到另一个边框进行测量的。拿一个物理盒子，任何盒子。把明显比盒子小的东西放进去。请任何人测量盒子的宽度。他将测量盒子两侧（“边界”）之间的距离。没有人会考虑测量盒子里的东西。 创建用于保存内容的框的Web设计师关心看得见的框的宽度，大约是从边框到边框的距离。边界而不是内容是网站用户的视觉线索。没有人对内容的宽度感兴趣。
就我个人而言，我发现W3C的盒子模型与此相反。引用我自己的话：
从逻辑上讲，框是从一个边框到另一个边框进行测量的。拿一个物理盒子，任何盒子。把明显比盒子小的东西放进去。请任何人测量盒子的宽度。他将测量盒子两侧（“边界”）之间的距离。没有人会考虑测量盒子里的东西。
创建用于保存内容的框的Web设计师关心看得见的框的宽度，大约是从边框到边框的距离。边界而不是内容是网站用户的视觉线索。没有人对内容的宽度感兴趣。
我同意边箱模型更有意义（至少对我来说是这样）。最初的W3C盒子模型存在争议，导致了箱体尺寸财产CSS3中。
边箱
箱体尺寸
宽度
宽度：30em
宽度：320px
就我个人而言，我更喜欢IE的盒子模型，而不是偶尔感到羞耻。正如OP指出的那样似乎为了更合理地使用预定义的宽度，边距、填充和边框宽度减去的，而不是有一个宽度补充.
另一方面，我可以很高兴地与这两个模型一起工作，我真正想要的是一致性在实现之间，无论选择哪个实现。
虽然我发现W3C在大多数情况下都做对了，但在这种特殊的情况下，我不得不说IE的box模型是优越的。
我经常遇到的一个常见问题是，当我想将宽度设置为百分比时，也要设置像素填充。为了让div拉伸到100%并添加填充，我不得不使用两个div，而不是一个div。否则，将填充因素考虑在内后，在单个div上应用100%实际上会超出您的预期。这使得使用流体布局非常困难。
与其说是哪个更好或更坏的问题，不如说是遵循公认组织的标准，而不是。。
另一方面，您的问题可能是有人希望将他的文本包装在一个300px的容器中，该容器与下一个容器的距离为10像素。。现在，为了计算宽度，您必须进行与示例相同的计算。。这是一个你如何看待同一问题的例子。。
如果你总是在方框中使用填充、边框和边距，那么IE模型可能看起来更好、更符合逻辑，但事实并非如此。是的，WC3盒子模型有点复杂，但它在可能性和对布局的严格“像素级”控制方面有所回报。一旦你用方框模型做了足够多的布局，你就会习惯它，一旦你发现它的强大功能，你就永远不会想到IE浏览器是一种更好的网页布局方式。相信我，你去过那里。
