4.1 box-sizing 屬性
CSS 中的 box-sizing 屬性是一個強大的工具，用於管理元素大小計算模型。
它定義了如何計算元素的尺寸，包括寬度、高度、padding、border 和 margin。接下來我們會詳細解釋 box-sizing 的工作原理，以及它的應用如何影響網頁的佈局。
主要的 box-sizing 模型
Content-box (內容模型)
content-box 是所有元素的預設值。在這個模型中，元素的尺寸
(width 和 height) 只定義內容的大小，不包括 padding 和 border。這意味著
padding 和 border 會被加到元素的總寬度和高度中。
Border-box (邊框模型)
border-box 改變了尺寸計算模型，使得元素的尺寸 (width 和 height)
包括 padding 和 border。這意味著 padding 和 border 是整體寬度和高度的一部分，簡化了計算和元素尺寸管理。
box-sizing 的使用範例：
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: 寬和高只包括內容。</div>
<div class="box border-box">Border-box: 寬和高包括 padding 和邊框。</div>
代碼解釋：
.box: 所有框的基本樣式，包括 padding、邊框和尺寸.content-box: 使用 box-sizing: content-box 的元素，寬和高僅包括內容.border-box: 使用 box-sizing: border-box 的元素，寬和高包括 padding 和邊框
4.2 box-sizing 對佈局的影響
內容模型 (Content-box)
當使用 box-sizing: content-box; 時，padding 和邊框會加到元素的總寬度和高度中。
這可能需要在計算尺寸和定位元素時進行額外考慮。
使用範例
在這種情況下，元素的總寬度將是
200px + 20px (padding) * 2 + 5px (border) * 2 = 250px，
總高度將是 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px。
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: 寬和高只包括內容。</div>
邊框模型 (Border-box)
當使用 box-sizing: border-box; 時，padding 和邊框包含在元素的指定寬度和高度中。
這簡化了計算和管理元素的尺寸，特別是在創建自適應佈局時。
使用範例：
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: 寬和高包括 padding 和邊框。</div>
4.3 創建自適應佈局
使用 box-sizing: border-box; 可以簡化自適應佈局的創建，因為
元素的尺寸包括 padding 和邊框，避免了意外的溢出。
使用範例：
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
<div class="item">元素 4</div>
<div class="item">元素 5</div>
<div class="item">元素 6</div>
</div>
代碼解釋：
* { box-sizing: border-box; }: 將邊框模型應用到頁面上的所有元素以簡化尺寸管理.container: 具有自適應佈局的 Flex 容器.item: Flex 元素，均勻分配寬度並包含 padding 和 border 在總寬度中
4.4 固定尺寸與內部間隙
使用 box-sizing: border-box; 可以輕鬆設置具有內部間隙元素的固定尺寸，而不需擔心溢出。
使用範例：
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* 垂直居中文字 */
}
<div class="fixed-size">
固定尺寸
</div>
代碼解釋：
.fixed-size: 大小為 300x150 像素的固定尺寸元素，包括 padding 和 border，這樣就能準確控制其尺寸
GO TO FULL VERSION