直接改box-sizing: border-box能解决大部分百分比布局错位，但仅写 { box-sizing: border-box; }常失效，因未覆盖::before/::after伪元素（不继承该属性）、第三方组件shadow dom（样式隔离）、旧版safari对表单控件支持不稳定；正确写法是, ::before, ::after { box-sizing: border-box; }并置于css最顶部。
直接改 box-sizing: border-box 能解决大部分百分比布局错位，但只写一句 * { box-sizing: border-box; } 很可能漏掉关键节点，导致改了等于没改。
为什么写了 box-sizing: border-box 还错位
常见错误是只覆盖了普通元素，却忽略了伪元素和第三方组件内部样式：
-
::before和::after默认不继承box-sizing，而清浮动、图标、装饰性内容常靠它们实现，一旦它们仍按content-box计算，就会多占空间 - React 组件、Web Component 或 UI 库（如 Ant Design、Element Plus）的 shadow DOM 内部样式完全隔离，外部全局声明无效
- Safari 旧版对
input、textarea的box-sizing支持不稳定，尤其搭配line-height或自定义padding时容易回退
正确写法必须显式包含伪元素：* , *::before, *::after { box-sizing: border-box; }，且这条规则要放在所有 CSS 文件的最顶部。
box-sizing: border-box 在浮动布局中仍换行怎么办
即使启用了 border-box，两个 width: 50% 的浮动元素仍上下排列，大概率是父容器有 padding 或 border 未被纳入计算范围 —— 它们会压缩子元素可用宽度，使实际可分配空间
- 给父容器也加
box-sizing: border-box，确保它的width包含自身padding和border - 避免在浮动子项上设
margin：浮动元素的外边距不会折叠，但左右margin会直接加在width上，突破 50% - 更稳妥的做法是用
display: flex替代浮动，flex: 1天然无视padding对总宽的影响
Grid / Flex 布局里 box-sizing 还重要吗
重要，但作用点不同。Grid 和 Flex 本身不依赖百分比宽度计算，但子项若含 padding 或 border，仍会影响内容区域尺寸和换行行为：
- Grid 中设置
gap: 10px时，浏览器会先从容器宽度中扣除所有gap占用空间，再把剩余像素分给fr或%轨道；如果子项自身因content-box多出几像素，就可能触发舍入误差，造成列宽肉眼可见不均 - Flex 子项若含长单词或 URL，默认
min-width: auto会阻止收缩，此时即使box-sizing: border-box已启用，仍需额外加min-width: 0和overflow: hidden才能真正守住房间 - 所有 Grid/Flex 容器和直系子项都应统一声明
box-sizing: border-box，否则开发者工具「Computed」面板里看到的 width 值会和你预期对不上
真正容易被忽略的是：盒模型修正不是一劳永逸的开关，它必须贯穿到每一层作用域 —— 从全局重置、伪元素补全、第三方组件兜底，再到响应式断点内重新校验。哪怕只漏一个 ::after，也可能让整个栅格偏移 1px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
