必须用box-sizing: border-box，否则width: 33.333%加padding会因content-box默认行为导致总宽超100%而换行；需全局重置、::before、*::after并兼容旧浏览器前缀，配合gap实现稳定网格。
直接用 box-sizing: border-box，否则所有基于百分比的列宽（比如 width: 33.333%）一加 padding 就会超限换行——这不是bug，是 content-box 的默认行为。
为什么 width: 33.333% 的三列网格在加 padding 后崩了
因为默认 box-sizing: content-box 下，width 只管内容区，padding: 16px 和 border: 1px 是额外加在宽度外面的。实际占用变成 33.333% + 32px + 2px，三列加起来远超 100%，必然换行。
这种“隐形膨胀”在小屏下尤其致命：明明写了 col-4，结果只排下两列，且媒体查询改 width 也救不回来——padding 带来的溢出量是固定像素，和百分比不联动。
- 常见错误现象：
width: 50%的卡片加了padding: 12px后被挤到下一行 - 用
calc(50% - 24px)补救，但换到平板断点又要重算，维护成本高 - 第三方组件（如表单控件）嵌入后突然错位，查半天发现它没继承
box-sizing
全局重置必须覆盖伪元素
只写 * { box-sizing: border-box } 不够，*::before 和 *::after 仍走 content-box，而很多 UI 库（Bootstrap 的 clearfix、图标伪元素）依赖它们，一旦尺寸失控，整个栅格就松动。
正确写法是：
*, *::before, *::after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
旧版 Android Webview（4.0–4.3）认 -moz- 前缀，不是 -webkit-；iOS Safari 4.2+ 已原生支持，但保险起见全加上。
grid / flex 栅格中 box-sizing 和 gap 要配合用
gap 管列/行之间的空隙，box-sizing: border-box 管单个格子自身的尺寸稳定性，二者不冲突，反而互补。
例如：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
padding: 12px;
/* 无需 calc()，border-box 让 padding 往里缩 */
}
- 如果格子本身还带
border或需要响应式padding（桌面16px，手机8px），border-box是唯一能保证1fr真按比例分配的基础 -
flex-basis在content-box下会被padding扰动，导致flex: 1占比失真 - JavaScript 读取
offsetWidth时，border-box返回值才和 CSS 声明的width一致，避免动态计算时反复减getComputedStyle的padding
老项目改造别一刀切，先锁关键模块
全局重置风险高，尤其混用 jQuery 插件或遗留表单样式时。更稳妥的做法是：先给栅格核心类显式声明，比如：
.col-1, .col-2, .col-3, .col-4,
.grid-item, .card, .form-group {
box-sizing: border-box;
}
再逐步扩展。特别注意表单控件：input、textarea、select 在 Safari 和部分安卓 WebView 中默认仍是 content-box，必须单独设：
input, textarea, select, button {
box-sizing: border-box;
}
最常被忽略的一点：当你在 border-box 下还写 width: calc(100% - 20px)，那个 20px 应该是外边距或间隙，不是为了抵消 padding——border-box 已经管了这部分。算错就等于白设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
