CSS Box Sizing
CSS Box Sizing
CSS box-sizing 屬性允許我們將內邊距和邊框包含在元素的總寬度和高度中。
沒有 CSS box-sizing 屬性
預設情況下，元素的寬度和高度計算方法如下：
width + padding + border = 元素的實際寬度
height + padding + border = 元素的實際高度
這意味著：當您設定元素的寬度/高度時，該元素通常會比您設定的要大（因為元素的邊框和內邊距會加到元素指定的寬度/高度上）。
下圖顯示了兩個具有相同指定寬度和高度的 <div> 元素。
這個 div 較小（寬度為 300px，高度為 100px）。
這個 div 較大（寬度也為 300px，高度為 100px）。
上面的兩個 <div> 元素在結果中具有不同的尺寸（因為 div2 指定了內邊距）。
示例
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
自己動手試一試 »
box-sizing 屬性解決了這個問題。
使用 CSS box-sizing 屬性
CSS box-sizing 屬性允許我們將內邊距和邊框包含在元素的總寬度和高度中。
如果您為元素設定 box-sizing: border-box;，則內邊距和邊框會包含在寬度和高度中。
現在這兩個 div 的尺寸相同了！
太棒了！
下面是與上面相同的示例，在兩個 <div> 元素中都添加了 box-sizing: border-box;。
示例
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
自己動手試一試 »
由於使用 box-sizing: border-box; 的結果要好得多，許多開發者希望他們頁面上的所有元素都能以這種方式工作。
下面的程式碼確保所有元素都以這種更直觀的方式進行尺寸調整。許多瀏覽器已經為許多表單元素（但並非所有元素，這就是為什麼 input 和 textarea 在 width: 100% 時看起來不同）使用了 box-sizing: border-box;。
將此應用於所有元素是安全且明智的。
CSS Box Sizing 屬性
| 屬性 | 描述 |
|---|---|
| box-sizing | 定義元素的寬度和高度如何計算：是否包含內邊距和邊框 |
