box-sizing: border-box使width/height包含padding和border，确保总宽高恒定；常见失效因权重不足、被覆盖或未作用于目标元素，全局重置*{box-sizing:border-box}最稳妥。
直接设置 box-sizing: border-box 就行，但必须确保它生效——很多人写了却没效果，问题通常出在选择器权重、继承规则或重置遗漏上。
为什么写了 box-sizing: border-box 还不管用
常见原因不是语法错，而是它被更高优先级的样式覆盖，或压根没应用到目标元素上：
- 没写在目标元素的样式块里，而是只写在父级或全局重置里，但被其他
box-sizing: content-box覆盖了 - 用了简写属性（比如
all: unset）重置后，box-sizing被强制回退为初始值content-box - 某些内置表单控件（如
<input type="search">）在部分浏览器中会忽略border-box，需显式加!important或用更具体的选择器 - CSS-in-JS 库或框架组件内联样式可能绕过你的 CSS 规则
怎么确保 box-sizing: border-box 真正生效
最稳妥的做法是全局统一重置，同时兜底处理伪元素和特殊场景：
*,
*::before,
*::after {
box-sizing: border-box;
}
这个写法能覆盖所有常规情况。如果项目里用了 Web Components 或 Shadow DOM，还需额外在 :host 或 ::slotted 中声明。
若只想局部启用，直接写在目标选择器里即可，例如：
.card {
width: 300px;
padding: 16px;
border: 1px solid #ccc;
box-sizing: border-box;
}
此时该 .card 元素总宽度恒为 300px，内容区自动收缩为 300px - 2×16px - 2×1px = 266px。
box-sizing: border-box 下 width 的真实含义
这是最容易误解的一点：设置了 box-sizing: border-box 后，width 不再是“内容宽度”，而是“从左 border 外沿到右 border 外沿的总宽度”。所以：
-
width: 200px+padding: 10px+border: 2px→ 实际总宽仍是200px，不是224px - 内容区宽度 =
width - padding-left - padding-right - border-left-width - border-right-width - margin 始终不参与
box-sizing计算，它永远在 border 外单独占位
真正容易被忽略的是：当你用 max-width 或 flex-basis 配合 border-box 时，它们同样遵循“包含 padding 和 border”的规则；但百分比宽度（如 width: 50%）的计算基准，仍是父容器的 content 区宽度——这点不会因 box-sizing 改变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
