盒模型的哪種寬高定義更符合人類直覺？

在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

代表不了人類，只說說自己的感覺。

如果我們要在盒子內部放東西，那我們關心的是盒子裡邊究竟能放得下多大的東西。相反如果我們要把這個盒子放到別的東西裡邊，我們關心的就是盒子外部的尺寸。兩者都有實用價值，這點是可以肯定的。

那麼為什麼 box-sizing: border-box 目前在我看來是更好的選擇呢？因為我們的網頁正逐漸從固定尺寸轉向自適應屏幕，使用百分比長度來指定尺寸成為更普遍的設計需求。舉個最簡單的例子，一個容器內要放兩個元素，各佔一半寬度，但是這兩個元素都有 10px 的邊框。這是典型的 box-sizing: content-box 無法完美處理的場景，要實現這個需求需要增加 HTML 元素嵌套（當然現在也可以利用 calc(50% - 20px) 來實現）。因為 width: 50% 指的是內部元素的 content box 寬度等於外部元素 content box 元素的一半，那麼就沒有空間可以留給 padding/border 了。而 box-sizing: border-box 以後正好可使內部元素的 border box 寬度為外部元素 content box 寬度的一半，padding/border 都可以隨意進行設置。這裡有個實現的例子。

box-sizing: border-box 的優勢並不見得在於更直觀，而是在遇到某些常見需求時更容易實現效果。

沒覺得有什麼「符合人類直覺」的。content-box 的優勢是可以知道最多能放多少內容，劣勢是不方便計算。就算是我喜歡的 border-box，也跟直覺沒多大關係，只是便於掌控。

要說直覺或者現實規律的話，得看你對盒子的理解。border 相當於外殼，外殼增厚盒子隨之變大，content-box、padding-box 有它的道理。但是既然尺寸已經定了，外殼增厚也只能在內部進行，這是 border-box 的道理。

我愛IE。

你呢？