最轻量4px网格方案是用两层linear-gradient叠加：横线background: linear-gradient(0deg, #ccc8 1px, transparent 1px)、竖线background: linear-gradient(90deg, #ccc8 1px, transparent 1px)，background-size: 4px 4px。
怎么用 CSS background 实现 4px 网格辅助线
直接在 body 或布局容器上加一层重复渐变背景，是最轻量、无侵入的 4px 网格方案，适合开发调试和设计对齐验证。
- 关键代码是
background-size: 4px 4px，不是 8px 或 16px —— 写错就不是 4px 基准了 - 两层
linear-gradient分别控制横线和竖线：linear-gradient(0deg, #ccc 1px, transparent 1px)（横线）、linear-gradient(90deg, #ccc 1px, transparent 1px)（竖线） - 线宽设为
1px是安全值；设成0.5px在缩放或高清屏下可能不可见，设成2px会干扰视觉判断 - 透明度建议用
#ccc8（即 rgba(204,204,204,0.5)），太深会盖住内容，太浅又看不清
如何定义 4px 基准的 CSS 变量系统
仅靠辅助线不够，真正落地要让所有 margin、padding、line-height 都可推导自 4px 单位，否则容易退化成“看着对齐、写着混乱”。
- 必须用
:root定义基础变量：--base-unit: 4px，而不是写死calc(4px * 2)到每个属性里 - 推荐按语义命名间距层级，例如：
--space-xxs: calc(var(--base-unit) * 1)（4px）、--space-xs: calc(var(--base-unit) * 2)（8px）、--space-sm: calc(var(--base-unit) * 3)（12px）——避免用数字后缀如--space-2，语义不清 - 禁止在组件中混用像素值和变量，比如
padding: 8px var(--space-sm)，这会破坏倍数一致性，导致后续无法批量调整 - 行高建议也走倍数：
line-height: calc(var(--base-unit) * 6)（24px），而不是用无单位数值（如1.5），后者受字体大小影响，不可控
为什么不能直接用 4px * 小数倍（比如 2.5）
表面上 calc(4px * 2.5) 能得到 10px，但实际会埋下三个隐患。
- 设计稿中标注的 “10px 间距” 很可能是视觉估算值，不是真实网格对齐点；强行实现反而让元素落在网格线之间，破坏节奏感
- 小数倍在缩放（如 125% 缩放）或某些浏览器渲染中可能产生 sub-pixel 渲染模糊，尤其在 border 或阴影边缘
- 团队协作时，
* 2.5无法被自动化工具识别为“合规倍数”，CI 检查、设计系统文档生成都会漏掉这个异常点 - 真有 10px 需求？优先检查是否该用
--space-xs（8px）+--space-xxs（4px）组合，或调整组件结构，而非妥协单位系统
设计师和前端对齐 4px 网格时最常漏掉的一件事
文字本身不参与网格对齐 —— 这句话听起来反直觉，但恰恰是多数还原偏差的根源。
- Sketch/Figma 中文本图层的“高度”包含大量不可见的 ascent/descent 空间，直接按这个高度设
padding或margin，必然比设计稿“看起来大” - 正确做法：把文字容器（如
div或span）对齐网格，再用display: flex; align-items: center居中文本，让文字在容器内自由呼吸 - 图标同理：不要按图标外框尺寸对齐，而是把图标父容器对齐 4px 网格，再用
vertical-align: middle或flex居中 - 这条规则一旦漏掉，哪怕变量、辅助线全对，最终效果仍会“差一口气”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
