在昨天的文章中，我們學習了網頁元件的幾何核心：盒子模型（Box Model），並且推導出了瀏覽器預設的空間計算公式：實際總寬度=內容寬度(width)+左右內邊距(Padding)+左右邊框(Border)
這套預設的計算機制在網頁開發中被稱為content-box（內容盒模型），雖然邏輯很符合幾何學，但在實際工程上，它卻為前端工程師帶來了極大的麻煩。
舉例來說，當你在設計一個網頁的側邊欄，希望它的寬度精準佔滿300px，當你設定好width:300px;後，為了讓裡面的文字不要貼邊，你隨手加上了padding: 20px;，接著為區塊加上border: 5px solid black;來做視覺區隔，這時候，這個側邊欄的實際總寬度就會悄悄爆開變成350px（300+40+10），直接把旁邊的元件擠到下一行，導致整個網頁版面大錯位
在這種傳統模式下，如果你想要維持300px的總寬度，你就必須自己拿起計算機進行「倒減法」扣除間距，把width手動修改為245px（300-40-10），每次只要有改到內邊距或邊框，就得重新計算一次width，這在開發大型專案時簡直就是一場惡夢。
box-sizing: border-box;為了徹底解決這個計算問題，CSS引入了**box-sizing（尺寸計算模式）屬性，而其中最完美的屬性值就是border-box**。
當我們對一個元件宣告了box-sizing: border-box;之後，實際總寬度的計算公式會直接被重組：實際總寬度=你所設定的寬度(width)
這意味著瀏覽器會改變它的幾何行為，當你設定寬度是300px時，這個盒子的實際總寬度就永遠會在300px，如果後續加上了內邊距（Padding）或邊框（Border），瀏覽器不會往外撐大盒子，而是會自動把空間往內壓縮，這種模式極其符合直覺，讓我們在進行網頁排版與配置時，不需要邊寫程式邊按計算機計算距離了。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Day13 box-sizing 對比範例</title>
<style>
.box {
width: 250px;
height: 100px;
padding: 20px;
border: 5px solid #2c3e50;
margin-bottom: 20px;
color: white;
}
/* 使用瀏覽器預設的傳統模式（會爆開） */
.traditional-box {
box-sizing: content-box;
background-color: #e74c3c;
}
/* 使用現代主流的直覺模式（不爆開） */
.modern-box {
box-sizing: border-box;
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box traditional-box">
我是傳統盒子(content-box)<br>
雖然width設250px，但實際上我被Padding和Border撐大到了 300px。
</div>
<div class="box modern-box">
我是現代盒子(border-box)<br>
雖然加了Padding和Border，我總寬度依然鎖死在250px 。
</div>
</body>
</html>
當在瀏覽器中打開這段程式碼時，你會直觀地看到，下方的綠色盒子比上方的紅色盒子窄了整整一圈，綠色盒子主動把40px的左右內邊距和10px的左右邊框消化在自己內部，確保了設定的250px尺寸絕對不變形。
因為border-box的優勢實在太顯著了，在現代的前端網頁開發中，幾乎沒有人會再回頭去使用傳統的方式，因此，業界工程師在開始動手寫專案的第一步，通常會利用萬用選擇器（*）在外部樣式表的頂端寫下全域重設，強迫網頁上的所有盒子一律採用現代模式：
*, *::before, *::after {
box-sizing: border-box;
}
(長這樣)
加上這行宣告後，整個網頁的所有元件都會聽話地遵循現代盒子的尺寸計算模式，從根本解決未來因為間距微調而造成版面崩塌的隱患。
今天我們深入探討了box-sizing的觀念，了解了content-box會往外撐大的痛點，並掌握了border-box將尺寸往內消化的核心幾何邏輯，學會這個屬性，代表你已經具備了控制網頁元件版面的能力。
明天我們將迎來排版篇章的另一個非常重要的觀念：元素顯示模式（Display），去看看網頁上的元件如何在排列時決定自己要呈現為區塊（Block）、行內（Inline）或是融合兩者特性的全新模式。
iThome鐵人賽
看影片追技術