标准盒模型中width仅指内容区宽度，这是w3c规范设计，并非bug；box-sizing: border-box则将width重新定义为content+padding+border总和，需显式重置伪元素盒模型。
因为 width 在标准盒模型（box-sizing: content-box）中被明确定义为“仅内容区宽度”，这是 W3C 规范的设计选择，不是 bug，也不是浏览器实现差异。
标准盒模型的 width 本质是 content-width
W3C 把盒子拆解为语义清晰的四层：content → padding → border → margin。其中 width 和 height 只负责描述最内层（content）的尺寸，其余部分由 padding、border、margin 独立控制。这种分离让样式职责更明确——比如你改 padding，不希望它意外改变内容排版逻辑；设 width: 100% 时，也理应只撑满父容器的内容区，而非“硬塞进 padding + border 后还溢出”。
常见错误现象：width: 100% 的卡片加了 padding: 16px 就横向滚动——这不是 CSS “算错了”，而是你用 content-box 时，总宽 = 100% + 32px，自然超限。
box-sizing: border-box 并不“修复”标准模型，只是换了一套语义
border-box 不是让标准模型“包含 padding”，而是彻底重定义了 width 的含义：它现在代表“content + padding + border”的总和。此时内容区会自动收缩来腾出空间，width 值才真正对应你在设计稿里量的“整个盒子宽度”。
使用场景差异：
- 做文字流式排版、需要精确控制内容区尺寸时（如
textarea字数统计区域），content-box更直观 - 做栅格、卡片、表单控件对齐时，
border-box能避免反复心算padding/border占位
注意：border-box 下若再写 width: 200px; padding: 20px; border: 2px solid，内容区只剩 200px - 40px - 4px = 156px，别误以为 padding 是“额外加的”。
全局设 * { box-sizing: border-box } 时容易漏掉伪元素
很多人只写 * { box-sizing: border-box; }，但 ::before 和 ::after 默认不受影响。如果用伪元素画边框或装饰，它们仍按 content-box 计算，导致视觉错位。
正确写法必须显式包含伪元素：
*,
*::before,
*::after {
box-sizing: border-box;
}
否则，哪怕主元素宽度严丝合缝，一个带 padding: 8px 的 ::after 也可能把布局撑开。
真正难的不是理解“为什么 width 不含 padding”，而是在混合使用 flex/grid、响应式断点、第三方组件时，要时刻意识到：你写的每个 width 值，背后都绑着一套盒模型语义——它可能来自全局重置，也可能被某个库的 scoped style 覆盖，甚至被 inline style 强制覆盖。查不到原因时，优先 inspect 元素 computed 样式里的 box-sizing 值，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
