關於 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