CSS box-sizing 屬性入門指南：新手必讀
更新日期： 2024 年 10 月 22 日
在 CSS 中，控制元素的大小和佈局是非常重要的一部分。
然而，當我們為元素添加 padding 和 border 時，元素的實際大小可能會超出我們所設定的 width 和 height，這對新手來說常常會感到困惑。
這時，CSS 的 box-sizing 屬性可以幫助我們更好地控制元素的尺寸計算，從而避免意外的佈局問題。
這篇文章將詳細介紹 box-sizing 屬性，並通過範例幫助你理解如何使用它來輕鬆控制元素大小。
什麼是 box-sizing 屬性？
box-sizing 是一個 CSS 屬性，用來決定元素的寬度和高度應該如何計算。
具體來說，box-sizing 控制的是 CSS Box Model 如何計算元素的總寬度和總高度。
它有兩個常用值：
content-box（預設值）border-box
這兩個值決定了 padding 和 border 是否會被包含在設定的寬度和高度內。
box-sizing 的常見值
content-box（預設值）
當 box-sizing 設置為 content-box 時，元素的 width 和 height 只應用於 內容區（content box），不包括 padding 和 border。
這意味著如果你為元素添加了內距或邊框，這些會額外增加元素的實際大小。
範例
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
}在這個例子中，儘管 width 設置為 200px 和 height 設置為 100px，但由於 padding 和 border 都會增加元素的實際尺寸：
- 元素的總寬度 = 200px（內容）+ 20px（左
padding）+ 20px（右padding）+ 5px（左border）+ 5px（右border）= 250px - 元素的總高度 = 100px（內容）+ 20px（上
padding）+ 20px（下padding）+ 5px（上border）+ 5px（下border）= 150px
border-box
當 box-sizing 設置為 border-box 時，元素的 width 和 height 包括了 padding 和 border。
這樣，無論添加多少 padding 或 border，元素的總寬度和高度都會保持不變。
範例
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}在這個例子中，元素的總寬度和高度會被限制在 200px 和 100px 內，因為 padding 和 border 都包含在這個尺寸中：
- 實際內容區的寬度 = 200px – 20px（左
padding）- 20px（右padding）- 5px（左border）- 5px（右border）= 150px - 實際內容區的高度 = 100px – 20px（上
padding）- 20px（下padding）- 5px（上border）- 5px（下border）= 50px
總的來說，border-box 可以讓我們更容易控制元素的總大小，特別是在設計固定寬度和高度的元素時，這樣就不需要額外考慮 padding 和 border 帶來的尺寸變化。
使用 box-sizing: border-box 的好處
更容易控制佈局
使用 border-box，可以避免因為忘記考慮 padding 和 border 導致的元素超出預設的寬度或高度。
當設置了固定寬度和高度的時候，這個屬性可以幫助我們保持元素的尺寸不變。
減少佈局錯誤
新手常常會忽略 padding 和 border 對元素大小的影響。
通過使用 box-sizing: border-box，我們可以減少這類常見的佈局錯誤，特別是當元素需要嚴格遵循預設尺寸時。
簡化響應式設計
在響應式設計中，我們經常需要確保元素不會超出容器的範圍。border-box 讓我們不必擔心額外的 padding 或 border 會破壞佈局，使響應式設計更加直觀和穩定。
全局應用 box-sizing: border-box
由於 border-box 能夠更好地幫助我們控制佈局和避免錯誤，因此許多開發者會將 box-sizing: border-box 設為全局的默認值。這樣可以確保所有元素都使用統一的 Box Model 行為。
全局設置範例
* {
box-sizing: border-box;
}這段程式碼會將所有元素的 box-sizing 設置為 border-box，使整個頁面更具一致性。
這種做法在現代開發中非常常見，能有效防止因為 box-sizing 差異導致的尺寸問題。
新手常犯的錯誤
忘記考慮 padding 和 border
新手在設定元素的寬度和高度時，常常忘記 padding 和 border 會增加元素的總大小，導致佈局錯亂。
使用 content-box 時，必須額外考慮這些值，確保它們不會影響到總寬度和高度。
錯誤範例
div {
width: 200px;
padding: 20px;
border: 5px solid black;
}在這個例子中，div 的總寬度實際上會是 250px，而不是 200px。
如果設計一個固定寬度的元素，這可能會導致它超出容器的範圍。
忽略 box-sizing: border-box 的優勢
許多新手只使用 content-box，但忘記 border-box 能夠提供更直觀的控制，特別是當需要處理固定寬度和高度的元素時。
如果不熟悉 border-box，容易在設置邊框或內距後導致元素尺寸計算錯誤。
結論
box-sizing 是控制 CSS 元素大小的關鍵屬性。
通過了解 content-box 和 border-box 之間的差異，我們可以更靈活地設置元素的寬度和高度，並避免佈局問題。
對於新手來說，使用 box-sizing: border-box 可以簡化佈局設計，減少計算錯誤和佈局崩壞的風險。
無論是響應式設計還是固定佈局，正確理解 box-sizing 的行為將大大提升你的 CSS 技能。