box-sizing: border-box 是实现无缝网格栅格的必要前提，它使 width 包含 padding 和 border，避免因额外尺寸导致换行错位或间隙失控，尤其在浮动和兼容旧版 Grid 中不可或缺。
box-sizing: border-box 是实现无缝网格栅格的必要前提，不设它，padding 和 border 会撑破列宽，导致换行错位或间隙失控。
为什么必须用 box-sizing: border-box
CSS 默认的 box-sizing: content-box 会让 width 只算内容区，加上 padding 和 border 后总宽必然超 100%，浮动或 Grid 子项就会掉行。比如三列各设 width: 33.33%，再加 padding: 10px，实际宽度就变成约 33.33% + 20px —— 溢出是必然的。
使用 box-sizing: border-box 后，width 包含了 padding 和 border，只要百分比加起来是 100%，就能严丝合缝对齐。
- 全局推荐写法：
* { box-sizing: border-box; }（含::before和::after） - 若只作用于栅格，直接加在
.grid-item或[class*="col-"]上即可 - 注意：IE8+ 支持该属性，无需前缀
box-sizing 在浮动栅格中的关键配合点
浮动方案依赖 float: left + 百分比 width，但一旦加 padding 做间距，就必须靠 box-sizing: border-box 锁死总宽。否则你得手动从 width 里扣减 padding，极其易错。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：.col-4 { width: 33.33%; padding: 15px; } → 实际占位 >33.33%，三列无法同行
正确写法示例：
.col-4 {
float: left;
width: 33.333%;
padding: 15px;
box-sizing: border-box;
}- 父容器需清除浮动（
overflow: hidden或::after伪元素） - 如果用负 margin 抵消 padding 外边距（如
.row { margin: 0 -15px; }），仍需box-sizing: border-box保证子项自身不溢出 - 移动端单列时，
width: 100%同样要配box-sizing，否则上下 padding 会让高度计算异常
box-sizing 对 Grid 栅格的影响是否一样？
影响逻辑一致，但表现更隐蔽。Grid 本身不因 padding 换行，但 gap 才是官方推荐的间距方式；如果你仍用 padding 模拟 gap（比如为了兼容旧 Safari），那 box-sizing: border-box 就不可少。
例如下面这种非标准写法：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid-item {
padding: 12px;
box-sizing: border-box; /* 必须加，否则 1fr 宽度被 padding 推宽 */
}- 现代写法应优先用
gap: 12px，此时box-sizing不影响列宽计算，但仍建议保留以防其他样式干扰 - Grid 中
box-sizing主要防止子项内部内容（如文字、图片）撑破单元格，尤其当设置固定height或max-height时 - 不要省略它——即使当前没出问题，后续加 border 或 padding 就立刻暴露
最容易被忽略的是：box-sizing 不是“用了就完事”，它必须和你的宽度策略（百分比 / fr / flex-basis）严格匹配；一旦混用 content-box 元素和 border-box 元素在同一行，缝隙和错位会非常难定位。
