box-sizing屬性讓css布局更容易並且更直觀。但是為什麽它有效又被熱愛，先讓我們看下它的歷史。

盒子模型歷史

自從css誕生，盒子模型就這樣默認的工作：

width + padding + border = 元素被渲染的／實際可見的寬度

height + padding + border = 元素被渲染的／實際可見的高度

這可能是違法直覺的，因為一旦你給元素加了padding或border你設置的高度／寬度就會跑出window。

回顧一下web設計，IE早起的版本（<IE 6）在 quirks mode下處理盒子模型是不同的：

width = 元素被渲染的／實際可見的寬度

height 
 
= 元素被渲染的／實際可見的高度

border／padding的值被放進了元素盒子裏，通過減小盒子的寬／高，而不是擴展它。

一些人更喜歡這種quirky的盒子模型，認為它更直觀。

但是，在固定寬度設計的時代，一旦你理解了默認盒子模型，使用起來就不太復雜。你可以通過簡單的數學計算出你需要設置多寬多高。對於現在的開發者的問題是那些絕對的px長度不會翻譯成自適應的設計i，所以相同的數學問題不再適用。

自適應設計開始變得流行，開發者和設計者希望更新盒子模型。偉大的設計者Jon Hicks，以他的優秀的流式寬度設計出名，在CSS wishlist上加了這個主題：

我想要一個不一樣的盒子模型。我發現一個把padding／border加在元素的寬度上很奇怪，希望能給出一種方式，比如textarea 100% 寬，3px padding，不用擔心它會怎樣布局。也許可以是一個內置padding？

現代box-sizing

這些想法促進了box-sizing屬性被引入css3.即使box-sizing有三種值：content-box，padding-box，border-box，最常用的是border-box。

現在，所有瀏覽器的最新版本使用了原始的：width／height + padding + border = 實際寬／高 的盒子模型。用box-sizing：border-bbox；我們可以改變盒子模型為曾經的quirky方式，這種方式元素的具體寬高並不會受padding／border影響。這已經證明了自適應設計中很有用。

因此，你可能會自問，“是不是舊版本的IE做了正確的事情？”一些人是這樣認為的。

Good，Better，and (probably) Best box-sizing Reset Methods

# The “old” border-box reset

* {
  box-sizing: border-box;
}

# Universal Box Sizing

*, *:before, *:after {
  box-sizing: border-box;
}
//這種方法包含了偽類元素。但是*選擇器讓開發者在別的地方使用content-box／padding-box比較困難。

# Universal Box Sizing with Inheritance

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
// 這種reset方法比之前的方法給你了更大的靈活性 -- 你可以任意使用content-box／padding-box，不用擔心通配選擇器覆蓋你的css。

#css3# box-sizing