關於 box-sizing 屬性

經過了幾個世代的轉變，人們意識到自己運算出元素的寬度實在很無趣，所以終於出現了一個叫做 box-sizing 的 CSS 屬性。當你設定一個元素樣式為 box-sizing: border-box;，這個元素的內距和邊框將不會增加元素本身的寬度。我們用跟上一頁一樣的例子，但我們將兩個元素都設定了 box-sizing: border-box; ： 

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
<div class="simple">

我們現在一樣大小了！

</div>
<div class="fancy">

喔耶！

</div>

這樣寫好像沒有幫助多少，有些 CSS 開發人員想要將這個屬性套用到所有元素上，此時你可以將以下 CSS 樣式套用在頁面上： 

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

這樣可以確保所有元素的寬度都可以用比較直觀的方式來定義。

因為 box-sizing 算是個比較新的屬性，所以你還應該還是要加上我之前在例子中使用的 -webkit- 和 -moz- 前綴（Prefixes），這樣才能啟用特定瀏覽器實驗中的 CSS 特性。請記得該屬性從 IE8+ 之後就開始支援。

  • Creative Commons License