为什么W3C要制定content-box盒子模型？IE5.5之前的IE盒子模型放在今天来看也是极好的啊

并且CSS3新出的box-sizing可以修改盒子模型，算不算是对W3C自己的错误进行的打脸行为？

回复内容：

泻药……

这种陈年往事儿谁知道去啊。

========== 以下全是猜 ==========

先说为啥俩不一样的事儿，这玩意只能看看相关时间来猜想了：

• Hakon Wium Lie CSS 创始人（之一） 1994 年提出 CSS 概念。
• IE 3.0 1996年8月13日 发布，开始(部分)支持 CSS
  
• W3C 上可查到的 CSS 1 最早稿 Cascading Style Sheets, level 1 是在 1996年12月17日 号的
• IE 4.0 1997年9月-10月 发布

根据以上猜测，最开始（部分）支持 CSS 的 IE 3.0 在开发期间（起码比1996年8月要早），W3C 还没有可参照的（定稿）规范。于是按自己的理解实现了IE 盒模型。

之后最早的 CSS 1 规范出现，估计处于 IE 4.0 开发前期。

但是 IE 3.0 发布首周，下载次数就突破100万次。大量的用户，兴许让微软顾忌后续兼容问题，就没理盒模型差异。或者巨大的市场占有率对比下的 W3C 已经不重要，让当时的微软无视了盒模型差异。

至于为啥 W3C 要整这种盒模型，也就更不得而知了。
同样得靠猜。


兴许是这样一种设计思路：

• 前提 content-width border padding 都是不能负值的，否则也没法绘制了。可以想象 负值 边框要显示么？还是不显示。
  
• 在 border-box 模型思路下，如果 border padding 的宽度总和已经大于了width，那么实际的 content-width 是如何的？
  
• 直接0？ 那么 width 会比设定的值宽。这不是老IE的内容过宽撑开的另种节奏么。
• 负值？content width 为负也太不合理了，而且怎么绘制呢？
• 在 content-box 模型思路下， content-width border padding 都是正值，不存在 border-box 下 content-width 值是由减法得到的情况。一切都可以通过加运算得到正值。布局计算就相对简单很多，实现起来连带的坑也少。

但是，这样一种模型是违背正常思路的。
W3C 兴许是吸收了 IE border-box 模型对以上问题的解决方式经验后，推出 box-sizing 来兼容两者。

=========== 碎碎念 ==============

看有说排版和布局的。
这俩玩意什么区别呢，都没人说过。

个人理解的补充下：

版，片反，片为小木板，就是两片相对的小木板
有印刷后，版即为两个相对的文字，一边为模具一边为印刷后结果。
所谓排版，就是说排列这些文字。（在印刷中，文字可以说是最基本的个体单位了）

局，尺下口，尺为规矩法度，口为言语可引申为宏观。
局即为用规矩约束的宏观内容。
布局即为设置一些宏观的约束。

所以布局意为调整宏观结构，排版为排布个体位置。

虽然盒模型不符合正常思维，但对于最初的 CSS 规范来说，考虑到细部个体排布才是符合规范变编写正常思维的。出现这样个盒模型设定也就不足为奇了。 首先，“恶心”这个这么主观的词不应随便用。恶心可能是吃屎，也可能是因为怀孕，盒模型对题主来说不知道是前者还是后者。


说正经的，标准盒模型为啥是这样的，今年1月的css conf会后我也问过Bert Bos（和Hakon Wium Lie共同发明了CSS），虽然他的答案也不是完全令人满意（具体这里不展开了），不过基本的原因还是可以得到的：

就是我们一直说的，CSS当初是主要为文字排版需求而设计，而不是为GUI布局而设计的。


至于说IE为什么预见到了GUI布局需求？太高估IE团队了，他们只是这样实现方便而已。 （伪）历史著名打脸事件：box-sizing: border-box;
谁用谁点赞。 其实我一直不能理解，W3C就是画了几个相当于小学生水平的图型和一堆莫名其妙的文字，而IE是正儿八经的实现了一个符合人类理解的盒子模型，偏偏有人认为前者是正统，后者是异端。



别说我黑它，这个图的来源是：
http://www.w3.org/TR/WD-CSS2-971104/images/boxdim.gif


最后回答一下问题吧，这个事情只能猜。

W3C认为CSS盒模型是用来控制排版的，所以规定宽高都是内容的宽高。IE则以为CSS盒模型是用来控制布局的，所以和表格的宽高定义一样。

其实我一直觉得，用盒模型来做布局本来就是很别扭的。表格才是最适合布局的，虽然有些副作用和麻烦。当然，最新的Flexible Box是神器，大家都用Flexible Box就不会有那么多奇技淫巧怎么把li横着摆，垂直居中神马的了。


如果单纯从盒模型最初的设计目的来看（定义块元素的大小和边距），W3C的规范是更合理的，毕竟我们设置图片的高宽的时候，难道是考虑图片边框的高宽吗？我们设置段落宽度的时候也不会考虑padding。问题在于当盒模型用于布局的时候，就显然不如IE的规范合理了，所以，问题是为什么非要把盒模型用于布局呢？ 其实么，W3C的标准最开始就是用来黑微软的。 感觉微软的盒是设计师思维，w3c的是工程师思维 10年开始接触Web，当时看到的资料都是介绍w3c模型，一直很痛恨ie，:-)，难道不是w3c是正统么