box-sizing: border-box没生效，主因是被更高优先级样式覆盖或伪元素未声明；须用, ::before, *::after { box-sizing: border-box; }全局覆盖并置于CSS最顶部，同时排查Computed面板中是否被划掉、第三方库重置、Shadow DOM隔离及替换元素min-width限制。
box-sizing: border-box 为什么没生效？先看 computed styles
写了 box-sizing: border-box 却没效果，90% 是因为被更高优先级样式覆盖了。浏览器开发者工具的「Computed」面板里，如果 box-sizing 值被划掉（strikethrough），说明它没生效——不是语法错，是层叠输了。
- 第三方 UI 库（如 Ant Design、Element Plus）常在内部 reset 中把
box-sizing改回content-box，且带!important或更具体选择器 - CSS-in-JS（如 styled-components）服务端渲染时注入顺序错乱，导致你的全局重置被后加载的组件样式盖掉
- Shadow DOM 内部不继承外部
*规则，box-sizing必须在 scoped 样式里重复声明
验证方式：选中目标元素 → Computed → 搜索 box-sizing → 确认值是 border-box 且无划线。
伪元素 ::before / ::after 漏掉了，浮动和清除浮动就崩
只写 * { box-sizing: border-box; } 是无效的。伪元素不继承该声明，仍按默认 content-box 计算尺寸。而很多清除浮动、图标装饰、布局辅助都靠 ::after 或 ::before 实现，它们悄悄撑开容器，你根本看不到 HTML 里有“那个元素”。
- 真正起效的写法只有：
*, *::before, *::after { box-sizing: border-box; } - 这条规则必须放在所有 CSS 文件最顶部，或
<head>中最早加载的位置 - 老项目不敢动全局？至少补上高频出问题的选择器：
input, textarea, select, button, .form-group > *, .card-content > *
margin 和 BFC 完全不受 box-sizing 控制
box-sizing 只管 width/height 与 padding/border 的关系，对 margin 零影响。浮动栏右侧被挤掉、换行、高度塌陷，往往不是盒模型问题，而是 margin 叠加或父容器没形成 BFC。
立即学习“前端免费学习笔记（深入）”；
- 浮动子项的
margin会外溢，父容器若没清除浮动，高度塌陷为 0，子项的百分比宽度就按 0 计算 - 解决办法：父容器加
display: flow-root（推荐），或用伪元素清除：&::after { content: ""; display: table; clear: both; } -
margin: 0 20px导致溢出？别指望box-sizing修复，得改用padding或手动扣减宽度
替换元素（input、img、button）要额外加 min-width: 0
即使 box-sizing: border-box 生效，<input>、<textarea>、<button> 这类替换元素默认有 min-width: auto，在 Flex 容器中会抗拒收缩，直接撑破父容器。
- 显式加
min-width: 0是必须动作，不是可选项 - iOS Safari 对
<button>更狠：强制min-width: min-content，忽略min-width: 0；实测有效解法是min-width: 1px -
<img>、<svg>、<iframe>不受box-sizing约束内容缩放，必须配max-width: 100%+height: auto（iframe还要加width: 100%）
复杂布局里，最容易漏的是伪元素、替换元素、BFC 缺失这三点。box-sizing 是起点，不是终点。
