2009/03/27

box-sizing

box-shadow | box-sizing
box-sizing

此特徵可改變元素預設的矩形格子模型(box model)其計算高與寬的方法。這是 CSS3 建議的特徵。IE8 使用 box-sizing;Safari, Chrome 用 -webkit-box-sizing;Firefox 用 -moz-box-sizing。可設的值有:

  1. content-box:矩格的寬與高只包括內容,不含內緣(padding),邊線(border),外緣(margin)。此為預設值。
  2. padding-box:矩格的寬與高包括內容加上內緣。CSS3 無此項,只有 Firefox 支援此項。
  3. border-box:矩格的寬與高包括內容加上 內緣與邊線。
  • 上例中的圖片尺寸是 200px X 200px。Firefox, Safari, Chrome 都成功;IE6 無此項。

javascript 應用。可以用 style 物件 的特徵 boxSizing, webkitBoxSizing, MozBoxSizing 作動態變化。下例中用了三個 toggleCSS(),分別給 IE8, Firefox, Safari, Chrome 使用。