必须全局设置 *, *::before, *::after { box-sizing: border-box; } 并显式重置表单控件，因默认 content-box 使 width 不含 padding/border，导致溢出、换行；伪元素和部分表单控件不继承，旧浏览器及第三方库需额外处理。
因为不设 box-sizing: border-box，你写的 width: 100% 或 width: 200px 就不是它实际占的宽度——padding 和 border 会偷偷加在外面，布局错位、溢出、换行全是它惹的祸。
为什么 content-box 下 width 总是“不准”
浏览器默认用 content-box 解析尺寸：你设 width: 200px，它只管内容区；再加 padding: 12px 和 border: 1px，实际占宽变成 200 + 24 + 2 = 226px。父容器没预留这 26px，子元素就必然溢出或换行。
- 两个
width: 50%的盒子并排，只要其中任意一个有padding或border，总宽立刻超 100%，直接变成两行 -
input[type="text"] { width: 100%; padding: 8px; }在content-box下必溢出，触发横向滚动条 - Flex 项写了
flex: 1还加了padding: 16px，结果内容区被压缩到负数宽度（尤其当父容器窄时）
全局重置必须覆盖 *::before 和 *::after
伪元素不继承 box-sizing，默认仍是 content-box。你写了 * { box-sizing: border-box; }，但 ::before 画的下拉箭头、遮罩层、装饰边框仍按内容宽 + padding + border 算，结果就是容器看着没溢出，实际内部撑开 2px，导致换行、定位偏移、滚动条意外出现。
- 正确写法（且必须放在所有自定义样式之前）：
*, *::before, *::after { box-sizing: border-box; } - 漏掉
*::before或*::after，DevTools 里检查其computed box-sizing，会发现它确实是content-box - 这条规则被后续样式覆盖——顺序不对，等于白写
表单控件必须显式声明，不能靠继承
input、textarea、select 在不同浏览器中默认值不一致：input[type="search"] 在 Safari 中默认是 content-box，哪怕父级设了 border-box 也不生效；某些安卓 WebView 中 textarea 仍按 content-box 渲染。
- 实操建议：对所有表单控件显式声明，不要依赖继承：
input, textarea, select, button { box-sizing: border-box; } - 旧版 Safari（≤12）和部分 Android WebView 需加
-webkit-appearance: none缓解渲染异常 - 第三方 UI 库（如 Ant Design、Vant）可能用
!important强制content-box，需单独覆盖：.ant-input { box-sizing: border-box !important; }
哪些地方必须保留 content-box？
不是所有地方都适合 border-box，强行统一反而破坏功能：
-
input[type="range"]：它的滑块轨道渲染逻辑依赖content-box，设成border-box会导致拖动区域错位 -
svg元素带内联width属性时，在旧版 Android 浏览器中仍可能忽略max-width: 100%，需额外加display: block - 封装
canvas的容器：若外部传入的width必须严格等于绘图区域，就不能让padding挤占内容区
真正容易被忽略的是：box-sizing 只改 width/height 的计算逻辑，它不碰 margin，也不修复父容器塌陷或相邻 margin 合并——这些得靠别的手段处理。你得清楚自己是在控制“盒子边界”，还是在协调“盒子之间关系”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
