CSS Box Sizing in HTML

一、CSS盒模型簡介

盒子模型 是指將 HTML 中所有元素看作盒子的概念，每個盒子由 內容區域、內邊距、邊框 和 外邊距 四個部分組成。這是 CSS 的一種基本布局模型，用於在網頁中控制元素的大小、位置和屬性。

在 CSS 中，默認的盒模型是 W3C 盒模型（可參考 box-sizing:content-box;）。這種盒模型將元素的整體寬度和高度計算為 內容區域 寬度和高度加上 內邊距、邊框 和 外邊距，因此，如果這些部分太寬或太高，可能會導致整個元素過大，或無法與其他元素進行良好的布局。

隨著網頁布局越來越複雜，開發人員更頻繁地使用 flexbox 和 grid 等彈性布局模型，需要在這些布局模型中使用更多的百分比和自適應寬度。這使得開發人員越來越關注怎樣更精細地控制元素的大小，以及如何通過 CSS 更好地控制盒模型的行為。

二、解決盒模型的問題：box-sizing

CSS3 的 box-sizing 屬性可以改變 W3C 盒模型的行為，實現更自然的布局，其使用方法如下：

selector {
    box-sizing: content-box | border-box | inherit;
}

其中：

• content-box 是默認值，代表 W3C 盒模型，即整個元素寬度和高度都由 內容區域、內邊距、邊框 和 外邊距 共同決定；
• border-box 代表 IE 盒模型，即整個元素寬度和高度由 內容區域、內邊距 和 邊框 共同決定，也就是說，元素的寬度等於 外邊距 + 邊框 + 內邊距 + 內容區域 的寬度；
• inherit 繼承父元素的盒模型屬性。

使用 border-box 盒模型可以避免太寬或太高的問題，使得所有盒子的寬度和高度都可以更好地控制，即使改變內部的 內邊距 和 邊框 也不會影響元素的大小，這可以更輕鬆地構建靈活且可維護的布局。

三、CSS 實例

下面是一個簡單的 CSS 實例，使用不同的盒模型來構建一個矩形：

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 20px;
    background-color: lightblue;
    float: left;
}

.content-box {
    box-sizing: content-box;
}

.border-box {
    box-sizing: border-box;
}

HTML 實現如下：

<div class="content-box box">
    <p>content-box</p>
</div>

<div class="border-box box">
    <p>border-box</p>
</div>

如上所述，如果使用 content-box，可以看到 內邊距 和 邊框 都會影響盒子的大小：

content-box