讓控制版面更容易－CSS的box-sizing

關於CSS的一個重要概念就是盒子模型(box model)，它控制著頁面各元素的寬與高，比如當我們設定了一個元素的寬高時，所設定的數值還要再加上padding和border，最後才會是這個元素的實際尺寸。

所以若要準確控制版面不破版，原本所設定的尺寸還需要再扣掉border/padding，但是這樣每次設尺寸都要做計算，顯得太麻煩了，這時可以使用box-sizing此屬性，方便我們在設定width、height上更直觀。

box-sizing的設定值

content-box：預設值，實際寬高＝所設定的數值＋border＋padding

border-box：實際寬高＝所設定的數值(已包含border和padding)

若要確保各瀏覽器皆可套用的話可直接加上以下前綴，此屬性從IE8後便開始支援：

 -webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

 box-sizing: border-box;

範例：