使用方式

首先我們在要使用 Box Model 的元素上,加入以下的 CSS 樣式。
如此一來,這個元素就會吃到 Box Model 的屬性了,也就是 Padding 和 Border 將不會增加該元素本身的寬度。

.box {
  box-sizing: border-box;
}

當然我們也可以將這個屬性套用到所有元素上!像我這種已經不能沒有 Box Model 陪伴的人,就可以直接將以下的 CSS 樣式套用在頁面上的所有元素上。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
  • webkit 跟 -moz 是特定瀏覽器的前綴詞,使用時記得加上去。
  • 這個屬性從 IE8 之後開始支援。

設定值

box-sizing 有 content-boxborder-box 兩種屬性。

content-box

實際寬高 = 所設定的數值 + border + padding
這是網頁的預設值,也就是 Padding、Border、Margin 都會讓元素更寬或更高。

.box {
  box-sizing: content-box;
}

border-box

實際寬高 = 所設定的數值 (已包含 border 和 padding)
border-box 包含 Border 與 Padding,如果有 Margin 還是要自己計算寬高。

.box {
  box-sizing: border-box;
}

結語

使用 box-sizing: border-box 可以確保所有元素都可以用比較直觀的方式去定義,再也不用對 Padding 與 Border 加加減減哩!

寫這些技術筆記是為了讓自己以後忘記時有東西可以參考,也希望之後有人遇到類似問題時,能得到這些資訊。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫