必须全局设 box-sizing: border-box，否则带 padding 或 border 的百分比宽度会撑破容器；因 content-box 下 width 只控内容区，padding 和 border 额外叠加导致总宽超 100%。
必须全局设 box-sizing: border-box，否则任何带 padding 或 border 的百分比宽度都会撑破容器。
为什么box-sizing: content-box会让width: 50%失效
默认的 content-box 模式下，width: 50% 只管内容区，padding: 10px 和 border: 2px 会额外加在外部——两个并排元素实际总宽超过 100%，必然换行或横向滚动。
常见错误现象：
-
display: flex容器里两个flex: 1子项却错位或溢出 -
width: 100%的input超出父容器边界 - 媒体查询切列数后网格突然塌陷
全局重置box-sizing的写法和兼容性注意点
用这三行覆盖所有场景：
*, *::before, *::after {
box-sizing: border-box;
}
不要只写 * { box-sizing: border-box; }——漏掉伪元素会导致 ::before 的尺寸计算不一致。
需要注意：
- Ant Design、Element Plus 等 UI 库部分组件依赖
content-box行为，若发现表单控件高度异常，可单独回退：input, textarea, select { box-sizing: content-box; } - 旧版 Safari（iOS 12 之前）对
textarea的border-box解析不准，高度易压缩，需针对性修复 - 第三方 CSS-in-JS 主题若硬编码了
clientWidth - paddingLeft类逻辑，设border-box后可能读值偏小
box-sizing对calc()和vw布局的实际影响
box-sizing 不影响 calc() 或 vw 的计算过程，但决定这些结果“算进哪里”：
-
width: calc(50% - 1rem)+padding: 1rem：设border-box后，内容区自动收缩，总宽仍为calc()结果；否则总宽 =calc()+2rem -
width: 50vw元素加border: 4px：在content-box下实际占宽 =50vw + 8px，可能触发水平滚动；border-box下严格守界 - Grid 中
grid-template-columns: 1fr 200px若某列含padding: 16px，content-box会让该列实际超宽，破坏等分逻辑
真正容易被忽略的是：哪怕你用了 Flexbox 或 Grid，只要子元素没统一 box-sizing: border-box，flex-basis 和 grid-column 的尺寸基准就不可靠——它不是布局引擎的问题，是盒模型底层定义没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
