箱上浆

默认的盒子模型（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; 不直接应用于*，因此你可以轻松地在单个元素上覆盖此属性。