默认 content-box 下 width 仅指内容区，padding 和 border 额外增加总宽；切换 border-box 后 width 表示总宽，padding 和 border 向内压缩。
因为默认 box-sizing 是 content-box，padding 和 border 会额外加在你写的 width 外面——这不是 bug，是标准行为；切到 border-box 后，width 才真正代表“总宽度”，padding 往里挤，不撑大盒子。
为什么 padding 会让 width “失效”
浏览器默认用 content-box 模型：width 只管内容区，padding 和 border 是“附加项”。比如：
.card {
width: 300px;
padding: 16px;
border: 1px solid #ccc;
}
这个 .card 实际占宽是 300 + 16×2 + 1×2 = 334px。你看到它“撑大了”，其实是盒模型在按规则计算。
- 这种行为在响应式布局中尤其危险：比如
width: 100%+padding: 20px→ 实际超父容器 40px -
flex或grid子项设了width: 100%，但因padding额外叠加，列宽总和可能突破 100% - 表单控件（如
input）在 Chrome/Firefox 中默认是content-box，加padding后极易横向溢出
如何正确切换为 border-box
全局重置最稳妥，避免漏写、覆盖混乱：
*,
*::before,
*::after {
box-sizing: border-box;
}
- 必须包含
*::before和*::after，否则伪元素带padding或border时仍会撑开（比如用伪元素做装饰边框） - 不要只写
* { box-sizing: border-box; }——它不覆盖伪元素 - 第三方 UI 库（如 Ant Design、Bootstrap 5+）通常已内置该重置，重复声明不会报错，但调试时可能干扰样式来源判断
- 老版微信 X5 内核（v3.7 以下）对通配符伪元素支持不稳定，可加兜底：
html { box-sizing: border-box; }+ 后代选择器
哪些元素必须单独再声明
box-sizing 不继承，且部分原生元素的 UA 样式会强行覆盖全局设置：
-
input、textarea、select、button：不同浏览器默认值不一致，务必显式重写 -
img、video、canvas：虽支持box-sizing，但默认是content-box，加padding后容易在卡片布局中错位 -
td、th：部分浏览器下对border-box行为有细微差异，复杂表格建议实测 -
svg元素（如rect、circle）完全不支持box-sizing，别浪费时间设置
border-box 下 width 计算的实际效果
启用后，width 就是最终渲染宽度，padding 和 border 从里面“扣”：
.btn {
width: 120px;
padding: 8px 16px;
border: 2px solid #333;
box-sizing: border-box; /* 必须有 */
}
这个按钮总宽严格为 120px，内容区实际只有 120 − 16×2 − 2×2 = 84px。
- 用
calc()手动减padding是反模式——border-box的意义就是免去这种计算 -
offsetWidth、getBoundingClientRect().width返回的始终是最终渲染宽度，与box-sizing设置一致，JS 无需适配 - Flex/Grid 容器里的子项仍受此影响：如果
flex-basis: 200px的 item 是content-box，它的实际占位仍是200 + padding + border
真正难处理的不是切换本身，而是混合状态：全局设了 border-box，但某个第三方组件内部硬编码了 box-sizing: content-box，又没加 !important，结果尺寸推算全乱。遇到这类问题，直接查开发者工具的 Computed 面板，看 box-sizing 最终值是多少，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
