利用BORDER-BOX為網頁元素設定正確的長度與寬度

目前的css box model是這樣子決定元素的長/寬的：

width + padding + border = 元素實際寬度
height + padding + border = 元素實際高度 

很不直覺不是嗎？一般都會認為往外長的叫做margin，往內長的叫做padding吧？假設我們需要一個width=200px, border=2px, padding=10px，在以前我們實際寫的會是像這樣(如果我們需要把寬度固定在200px)

<div style="width:186px;border:2px;padding:5px">
    ..content here..
</div>

必需從border, padding反推出width。其實元素是固定長寬還好辦，拿出計算機多按幾下而已，但如果我們需要的是width=100%, border=2px, padding=10px這樣子的組合呢？

幸好有CSS3，先看下面的圖：

下方是比較直覺的Model，寬度多少就固定，border/padding應該是往元素內部去縮減，這樣在排版上好控制元素的大小，再利用margin來跟其它元素作隔間。但目前預設的box model是上方的樣子，width設定的就是內容的寬度，border/padding都是加上去的，所以實際元素大小較難掌握。

下方的box model叫做border-box，目前新版的瀏覽器以普遍支援，只需要在需要的元素上加上以下設定：

.border-box { 
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}

事實上，也可以直接指定給所有元素

* { 
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}

此文指出，border-box並不會影響JQuery(+UI)，那就放心的用吧。

附註：
1. 預設的設定叫做content-box，另外firefox有個非規範的padding-box，只有把padding算進來，border不算在width裡面。
2. 支援的瀏覽器：

  Chrome (any): box-sizing
  Opera 8.5+: box-sizing
  Firefox (any): -moz-box-sizing
  Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
  IE8+: box-sizing
  如果需要IE6/7支援，請參閱此處