CSS 盒模型 (Box Model) - 讓版面控制更容易

自己運算出元素寬度不覺得很麻煩、很無趣嗎?快使用盒模型控制住頁面上各個元素的寬高吧!

盒模型 — Box Model

每次計算元素的寬高時,都很怕不小心漏算了 1 px,讓畫面不整齊。不過有了「盒模型」之後,讓我更容易控制頁面上各個元素的寬與高了!

使用方式

STEP 1

首先,我們在要使用「盒模型」的元素上,加入以下的 CSS 樣式。

1
2
3
.box{
box-sizing: border-box;
}

如此一來,這個元素就會吃到「盒模型」的屬性了,也就是 padding 和 border 將不會增加該元素本身的寬度。

STEP 2

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

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

設定值

box-sizing 有 content-box 跟 border-box 兩種屬性。

1. content-box

1
2
3
.box{
box-sizing: content-box;
}

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

2. border-box

1
2
3
.box{
box-sizing: border-box;
}

border-box 則是只包含 border 跟 padding,margin 還是要自己計算寬高。
實際寬高 = 所設定的數值 (已包含 border 和 padding)

結語

這樣一來,我們就可以確保所有元素的寬度都可以用比較直觀的方式去定義,再也不用對 padding、border 加加減減的囉!

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

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