多列布局宽度对不上的主因是box-sizing未统一或padding/border在content-box下额外加宽；width:33.33%三列超100%源于content-box默认行为，需用border-box、gap或calc()解决。
多列布局中宽度对不上，八成不是 grid 或 flex 写错了，而是 box-sizing 没统一，或者 padding/border 在 content-box 下偷偷加宽了。
为什么 width: 33.33% 的三列总宽会超 100%
这是 content-box 的默认行为在作祟：每个列设 width: 33.33%，再加 padding: 12px 和 border: 1px，浏览器就按「内容区占父容器 33.33%，再额外往外撑 padding + border」算——三列加起来必然超宽，最后一列掉行。
- 实际总宽度 = 父容器 content width × 33.33% × 3 + 左右 padding × 6 + 左右 border × 6
- 只要父容器没设
box-sizing: border-box，子元素又带 padding/border，就大概率翻车 - Chrome DevTools 的
Computed面板里点开盒模型图示，能直接看到每层尺寸拆分，确认是不是 padding/border 在“额外加”
用 display: grid 时仍要防 box-sizing 漏洞
grid 容器本身不解决子项的盒模型问题。就算你写了 grid-template-columns: repeat(3, 1fr)，子项若仍是 content-box + padding: 16px，内容区会被压缩，视觉上列宽不均、文字挤在一起。
- 必须给所有 grid 子项（或全局）加
box-sizing: border-box - 更稳妥的是在 grid 容器上统一重置：
* { box-sizing: border-box; }，写在 CSS 最顶部 - 注意：IE11 不支持
display: grid，但支持box-sizing；老项目若兼容 IE，box-sizing仍有效，只是 grid 要降级
百分比列宽 + padding 导致错位的真相
写 width: 50% 还加 padding: 20px，错不在百分比本身——它始终按父容器 content width 计算。问题出在：padding 是额外加的，而你没预留空间。
- 方案一：把 padding 移到父容器上，子项只负责内容，例如父容器
padding: 0 20px，子项width: 100%且无 padding - 方案二：用
calc()手动扣减，如width: calc(50% - 40px)（适用于固定 padding 值） - 方案三：改用
gap（仅限 grid/flex），让间距由容器控制，子项彻底去掉 margin/padding —— 但 IE 全系不支持gap
flex 多列中 border-box 不等于万事大吉
即使所有子项都设了 box-sizing: border-box，如果父容器是 display: flex 且没设 flex-wrap: wrap，而子项总宽因 padding/border 实际略超，flex 会强行压缩子项（尤其 text 内容），导致文字折行或图标错位。
- 检查
flex-basis：默认是auto，会先按 content width 算，再叠加 padding/border → 推荐显式写flex-basis: 0+flex-grow: 1，让 flex 主动均分可用空间 - 避免混用
width和flex：比如同时写width: 33.33%和flex: 1，容易触发冲突计算 - 移动端 Safari 对
flex+ 小数像素有渲染抖动，建议列数为整数时优先用grid，更可控
真正麻烦的不是怎么加 box-sizing，而是哪些地方漏了它——第三方组件、重置样式没覆盖到的伪元素、动态插入的 DOM 节点，都可能悄悄回到 content-box。别信“只在关键地方加”，得从根上堵住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
