1、content-box:此值為其預設值，其讓元素維持W3C的標準Box Model，也就是說元素的寬度/高度（width/height）等於元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。

2、border-box:此值讓元素維持IE傳統的Box Model（IE6以下版本），也就是說元素的寬度/高度等於元素內容的寬度/高度。（從上面Box Model介紹可知，我們這裡的content width/height包含了元素的border,padding,內容的width/height【此處的內容寬度/高度=width/height-border-padding】）。

使用場景：

如果你的網頁有兩塊區域剛好等於網頁區域時候，這個時候沒有任何關係。

但是當你需要給你的元素加上border或者padding 時候就會發生悲劇，沒錯，被頂下去了 貼圖：

這個時候如果使用border-sizing border-box 就會完美避開這個問題，簡直佈局神器。

表單使用方面：
不同的表單元素在不同的瀏覽器上的大小是很難控制的。在不同的瀏覽器都有不同的border和padding，這個時候可以用border-box統一樣式是特別方便的！
內容參考：戳這裡=>