箱上漿

預設的盒子模型（content-box）可能是違反直覺的，因為一旦你開始向元素新增 padding 和 border 樣式，元素的 width / height 就不會在螢幕上顯示它的實際寬度或高度。

以下示例演示了 content-box 的這個潛在問題：

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

由於填充將被新增到 textarea 的寬度，因此得到的元素是寬度大於 100％的 textarea。

幸運的是，CSS 允許我們使用元素的 box-sizing 屬性更改框模型。可用屬性有三種不同的值：

• content-box：常見的盒子模型 - 寬度和高度僅包括內容，而不是填充或邊框

• padding-box：寬度和高度包括內容和填充，但不包括邊框

• border-box：寬度和高度包括內容，填充以及邊框

要解決上面的 textarea 問題，你可以將 box-sizing 屬性更改為 padding-box 或 border-box。border-box 是最常用的。

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

要將特定的盒子模型應用於頁面上的每個元素，請使用以下程式碼段：

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

在此編碼中，box-sizing:border-box; 不直接應用於*，因此你可以輕鬆地在單個元素上覆蓋此屬性。