box-sizing: border-box 没生效最常见的原因是样式被更高优先级规则覆盖或未正确应用到目标元素，需检查开发者工具确认是否真实生效、伪元素需单独设置、全局重置应包含 ::before/::after 并排除特定表单控件。
为什么 box-sizing: border-box 没生效？
最常见原因是样式被覆盖或未正确应用到目标元素。浏览器默认用 box-sizing: content-box，即使你写了 border-box，如果选择器优先级不够、写在了错误位置（比如只写了类但元素用的是内联样式），或者被后续规则重置，它就不起作用。
- 检查开发者工具里该元素的
box-sizing是否真的显示为border-box（不是initial或被划掉） - 确认没有其他 CSS 规则用更高优先级强制设回
content-box - 注意：伪元素（如
::before）不会继承父元素的box-sizing，需单独设置
全局设置 box-sizing 的安全写法
推荐在项目开头统一重置，避免遗漏。但不能只写 * { box-sizing: border-box; } —— 这会影响 <svg></svg>、<input type="range"> 等原生控件的渲染，部分浏览器下会出错。
*, *::before, *::after {
box-sizing: border-box;
}
<p>/<em> 但要排除某些特殊元素 </em>/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
box-sizing: content-box;
}- 必须包含
*::before和*::after，否则伪元素仍按content-box计算 - 不要对
<textarea></textarea>或<select></select>强制重置，它们在某些系统主题下依赖默认行为
height 设为固定值时，padding 为何还撑开容器？
即使用了 box-sizing: border-box，如果同时设置了 height 和 padding，且内容超出高度（比如文字换行、子元素溢出），浏览器仍可能扩大实际占用空间——因为 height 是“建议高度”，不是强制截断指令。
- 检查是否意外触发了
min-height或flex容器的默认拉伸行为 - 若用
display: flex，子元素的align-items: stretch会让内容区撑高，此时padding会叠加在最终高度上 - 真正想“压住总高度”，得配合
overflow: hidden或max-height
验证 border-box 是否真正起效的快速方法
直接对比元素的 offsetHeight 和 clientHeight：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('.my-element');
console.log('offsetHeight:', el.offsetHeight); // 包含 border + padding
console.log('clientHeight:', el.clientHeight); // 只包含 content + padding（不含 border）
// 若 box-sizing: border-box 生效，且无 border，则二者应相等（忽略四舍五入误差）-
offsetHeight始终包含 border 和 padding，不管box-sizing是什么 - 真正要看的是：当你改
padding时，offsetHeight是否不再随 padding 增加而变大 —— 如果变了，说明border-box没生效或被覆盖
实际中容易漏掉的是：框架组件（如 Ant Design、Element Plus）内部已设好 box-sizing，但你自定义的 wrapper 元素没同步设置；或者用了 CSS-in-JS 库，样式作用域导致重置失效。这类问题往往不报错，只默默“不工作”。
