為什麼W3C要制定content-box盒子模型？IE5.5之前的IE盒子模型放在今天來看也是極好的啊

01-14

並且CSS3新出的box-sizing可以修改盒子模型，算不算是對W3C自己的錯誤進行的打臉行為？

首先，「噁心」這個這麼主觀的詞不應隨便用。噁心可能是吃屎，也可能是因為懷孕，盒模型對題主來說不知道是前者還是後者。

說正經的，標準盒模型為啥是這樣的，今年1月的css conf會後我也問過Bert Bos（和Hakon Wium Lie共同發明了CSS），雖然他的答案也不是完全令人滿意（具體這裡不展開了），不過基本的原因還是可以得到的：

就是我們一直說的，CSS當初是主要為文字排版需求而設計，而不是為GUI布局而設計的。

至於說IE為什麼預見到了GUI布局需求？太高估IE團隊了，他們只是這樣實現方便而已。

瀉藥……

這種陳年往事兒誰知道去啊。

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

先說為啥倆不一樣的事兒，這玩意只能看看相關時間來猜想了：

根據以上猜測，最開始（部分）支持 CSS 的 IE 3.0 在開發期間（起碼比1996年8月要早），W3C 還沒有可參照的（定稿）規範。於是按自己的理解實現了IE 盒模型。

之後最早的 CSS 1 規範出現，估計處於 IE 4.0 開發前期。

但是 IE 3.0 發布首周，下載次數就突破100萬次。大量的用戶，興許讓微軟顧忌後續兼容問題，就沒理盒模型差異。或者巨大的市場佔有率對比下的 W3C 已經不重要，讓當時的微軟無視了盒模型差異。

至於為啥 W3C 要整這種盒模型，也就更不得而知了。

同樣得靠猜。

興許是這樣一種設計思路：

在 content-box 模型思路下， content-width border padding 都是正值，不存在 border-box 下 content-width 值是由減法得到的情況。一切都可以通過加運算得到正值。布局計算就相對簡單很多，實現起來連帶的坑也少。

但是，這樣一種模型是違背正常思路的。

W3C 興許是吸收了 IE border-box 模型對以上問題的解決方式經驗後，推出 box-sizing 來兼容兩者。

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

看有說排版和布局的。

這倆玩意什麼區別呢，都沒人說過。

個人理解的補充下：

版，片反，片為小木板，就是兩片相對的小木板

有印刷後，版即為兩個相對的文字，一邊為模具一邊為印刷後結果。

所謂排版，就是說排列這些文字。（在印刷中，文字可以說是最基本的個體單位了）

局，尺下口，尺為規矩法度，口為言語可引申為宏觀。

局即為用規矩約束的宏觀內容。

布局即為設置一些宏觀的約束。

所以布局意為調整宏觀結構，排版為排布個體位置。

雖然盒模型不符合正常思維，但對於最初的 CSS 規範來說，考慮到細部個體排布才是符合規範變編寫正常思維的。出現這樣個盒模型設定也就不足為奇了。

（偽）歷史著名打臉事件：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的規範合理了，所以，問題是為什麼非要把盒模型用於布局呢？

10年開始接觸Web，當時看到的資料都是介紹w3c模型，一直很痛恨ie，:-)，難道不是w3c是正統么

其實么，W3C的標準最開始就是用來黑微軟的。

感覺微軟的盒是設計師思維，w3c的是工程師思維