在 Web 开发中，理解元素的尺寸计算逻辑是布局设计的关键。CSS 的 box-sizing 属性通过决定 width 和 height 的定义方式，直接影响了元素的表现形式。在默认的 content-box 模式下，width 和 height 表示内容区域的尺寸，padding 和 border 会额外增加元素的实际宽高。而在 border-box 模式下，width 和 height 包含内容、padding 和 border 的总尺寸，使得布局更加直观和可控。选择合适的 box-sizing 模式，不仅可以简化布局计算，还能提升页面的响应式兼容性。
1. box-sizing 的可选值
1.1 属性值
| 属性值 | 含义 |
|---|---|
content-box | 默认值。width 和 height 只包括内容区域，不包含 padding 和 border。 |
border-box | width 和 height 包括内容、padding 和 border 的总宽度和高度。 |
inherit | 继承父元素的 box-sizing 属性值。 |
1.2. 对比总结
| 模式 | width 表示的含义 | 实际测量出的总宽度 | 内容宽度计算 |
|---|---|---|---|
| content-box | width 是内容的宽度 | width + padding + border | 与 width 相同 |
| border-box | width 是总宽度（包括 padding 和 border） | 与 width 相同 | width - padding - border |
2. content-box 中的 width
在 content-box 模式下：
width属性仅表示内容区域的宽度，不包括padding和border。- 实际测量出的元素的总宽度会大于
width，因为还要加上padding和border的宽度。
3. border-box 中的 width
在 border-box 模式下：
width属性表示元素的总宽度，包括内容、padding和border。- 内容区域的宽度会根据设置的
padding和border缩小，以保证总宽度固定为width。
