box-sizing: border-box 未生效主因是伪元素未继承、第三方组件样式隔离或 safari 兼容问题，需全局重置并单独处理；fr 列宽不均因小数宽度舍入及 gap 占用空间；gap 失效常因父容器未 box-sizing 或子项 width 干扰；grid 中绝对定位偏移因缺少 relative 定位上下文。
box-sizing: border-box 为什么没生效
写了 box-sizing: border-box 却还是错位，大概率是伪元素或第三方组件绕过了它。浏览器里 ::before 和 ::after 默认不继承这个声明，而清浮动、图标、装饰性内容常靠它们实现——一旦它们仍按 content-box 计算，就会多占几像素，累积起来就偏了。
必须写全：*, *::before, *::after { box-sizing: border-box; }，且这条规则要放在所有 CSS 的最顶部；React 组件、Web Component 或 Ant Design 这类 UI 库的 shadow DOM 内部样式完全隔离，外部声明无效，得在组件内单独加；Safari 旧版本对 input、textarea 的 box-sizing 支持不稳定，可额外加 padding: 0.375em; border: 1px solid; 并避免 line-height 干扰。
fr 单位列宽不均等，是不是计算错了
fr 本身没问题，问题出在浏览器对“可用空间”的实际测量上：它会先扣除所有固定尺寸（比如 gap、border、padding），再把剩余像素按比例分给 fr 轨道。如果容器宽度是小数（如 799.5px），两个 1fr 就可能被舍入成 399px 和 400px，肉眼就能看出偏差。
- 用开发者工具检查
grid-container的 Computedwidth，确认是否为整数 - 避免混用
px和fr：比如grid-template-columns: 200px 1fr 1fr，改用minmax(200px, 1fr) 1fr 1fr更可控 - 若必须固定侧边栏，写成
grid-template-columns: 200px minmax(0, 1fr)，minmax(0, 1fr)能防止内容撑大导致换行或溢出
gap 看起来没起作用，或者网格项被挤窄
gap 不是“额外留白”，而是直接参与轨道总宽计算的刚性占位。比如 grid-template-columns: 1fr 1fr 1fr + gap: 10px，三列之间有 2 个 gap，总共要从容器宽度里扣掉 20px，再把剩下部分三等分。很多人忘了这点，以为 gap 只是视觉间隔。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
检查父容器是否有 padding 或 border 未被 box-sizing: border-box 覆盖，它们会进一步压缩可用空间；不要在子项上设 width 或 min-width，尤其别写 width: 100%——它会强制占满轨道，无视 gap 预留；子项若含文字，记得加 min-width: 0 和 overflow: hidden，否则长单词或 URL 会撑裂轨道。
绝对定位元素在 Grid 里跑偏了
Grid 容器默认是 position: static，不构成定位上下文。所有子元素里的 position: absolute 会向上找最近的相对/绝对/固定定位祖先——通常是 body 或视口，导致坐标完全错乱，尤其在响应式缩放后更明显。
给定义 display: grid 的那个父容器（比如 .layout 或 .grid）直接加 position: relative，一行代码即可锁定 containing block；不要只给网格项（如 .card）加 position: relative——它会让自身脱离 Grid 行高计算，可能塌陷或错位；响应式下慎用 top/right 像素值，优先用 inset，并在媒体查询中重设其值，否则小屏下容易贴边溢出或遮挡。
gap 扣减逻辑被忽略、inset 在旧浏览器里不支持……这些地方不手动验证，光靠“写了应该就行”很容易卡住半天。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
