必须用, ::before, *::after { box-sizing: border-box; }全局重置并置于css最顶部，否则伪元素、第三方组件或父容器未同步修改会导致部分节点仍按content-box计算，引发1px偏差换行或错位。
box-sizing: border-box 是百分比布局不出错的底线，不是可选项。只在局部元素上写 box-sizing: border-box 无法规避误差——伪元素、第三方组件、浮动子项漏掉一个，就可能因 1px 偏差导致整行换行或对不齐。
为什么写了 box-sizing: border-box 还有像素误差？
常见原因不是语法错，而是生效范围没兜住：
- 伪元素
::before和::after不继承box-sizing，但很多装饰、清浮动、状态提示都靠它们实现；加了border: 1px就多占 2px，百分比立刻超限 - UI 库（如
.el-input、.ant-btn）内部用!important或更高权重覆盖了你的声明 - 旧版 Safari 对
<input>和<textarea></textarea>的border-box支持不稳定，哪怕写了也回退 - 父容器用了
padding，但子元素的width: calc(100% / 3)没减去对应值，实际可用宽度仍是100% - 左右 padding
验证是否生效：打开 DevTools，选中错位元素，在「Computed」面板里查 box-sizing 的最终值。显示 content-box 就说明没被覆盖到。
必须用 *, *::before, *::after 全局重置
只写 * { box-sizing: border-box; } 会漏掉伪元素；只写局部类名又容易被后续样式覆盖。真正起效的写法是：
*, *::before, *::after {
box-sizing: border-box;
}
这条规则必须放在所有 CSS 文件最顶部（不是某个局部文件里），确保优先级最高。它不是“多此一举”，而是防止浮动、Flex、Grid 混合布局时因盒模型不一致引发的连锁错位。
注意兼容性：box-sizing 在 IE8+ 原生支持，但若需兼容 IE8–9，得补前缀：-webkit-box-sizing、-moz-box-sizing、-ms-box-sizing。
calc() + border-box 才能稳住百分比计算
box-sizing: border-box 不改变 calc() 的逻辑，但让它结果可预测。比如三列等分且带左右边框：
.col {
width: calc((100% - 2px) / 3);
border: 1px solid #000;
}
在 border-box 下，width 包含边框，所以 calc() 减去的 2px 就是总边框宽度；而在 content-box 下，这个 2px 只扣内容区，边框仍额外加在外面，最终宽 = (100% - 2px) / 3 + 2px，必然溢出。
关键点：
-
calc(100% / 3)比33.333%更可靠，避免浏览器四舍五入累积误差 - 含
margin时，calc()必须显式减去它（box-sizing不管margin） - 父容器若设了
padding，子元素的calc()要先减去该值，再除以列数
真正难处理的不是写法，而是混合场景：比如 Flex 容器里嵌套浮动子项、Grid 区域内放第三方表单控件、动态插入的弹窗 DOM 没走主 CSS 入口。这些地方即使全局重置了 box-sizing，也可能因加载顺序、选择器权重或替换元素特性失效。调试时别只盯自己写的 CSS，先看 Computed 面板里那个值到底是什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
