设计稿还原不精准的核心在于未按CSS盒模型逐层拆解尺寸，需区分视觉标注与浏览器渲染差异，统一box-sizing、换算逻辑像素、处理字体度量及margin折叠。
设计稿还原不精准，核心问题往往不在“写不对样式”，而在于没按 CSS 盒模型逐层拆解、精确换算尺寸。设计师给的标注通常是「视觉呈现尺寸」，而浏览器渲染的是「盒模型叠加结果」，中间差了 padding、border、box-sizing、字体度量、行高、margin 折叠等关键变量。
确认设计稿单位与基准像素比
先核对设计稿是否为 @2x / @3x 切图，常见情况是：Sketch/Figma 标注显示 16px 字体，实际是 2x 下的 32px 物理像素 —— 但你写的 CSS 应该是 16px（逻辑像素），而非照搬切图尺寸。前端需以「设备无关像素（CSS px）」为准，不是图片上量出来的像素数。
- 若标注写「宽度：375px」且注明是 iPhone SE (1x)，那直接写
width: 375px - 若标注写「按钮高度：44pt」且是 iOS 设计规范，默认 1pt = 1px → 写
height: 44px - 用浏览器开发者工具「测量模式」（Ctrl+Shift+C 后悬停）对比真实渲染尺寸，反向验证换算是否一致
严格区分 box-sizing 并统一重置
CSS 默认 box-sizing: content-box，即 width/height 只含 content，不含 padding 和 border；但设计稿标注的「宽度」几乎全是「外轮廓总宽」——也就是 border-box 尺寸。不统一就会系统性偏大。
- 全局重置：
* { box-sizing: border-box; }（推荐加在 :root 或 reset.css 开头） - 重置后，
width: 100px; padding: 10px; border: 1px solid #000;渲染总宽就是 100px，内容区只剩 78px - 特别注意表单元素（input/select）、iframe 等原生元素可能忽略全局重置，需单独声明
字体相关尺寸必须结合 font-metrics 拆解
设计稿标「行高 24px，字号 16px」，不代表 line-height: 24px 就能对齐。因为实际行高由 font-family 的 ascent/descent、baseline 位置、以及浏览器默认字体度量共同决定。尤其中文字体，常有隐形上下边距。
立即学习“前端免费学习笔记（深入）”；
- 用
line-height: 1.5（无单位）比固定像素更健壮，它基于当前 font-size 计算 - 若必须像素精确，先用
font-family指定设计稿所用字体（或最接近的 Web 安全字体），再微调 line-height - 用 Chrome DevTools 的「Computed」面板查看「Line height」真实值，并展开「font metrics」看 ascent/descent 占比
外边距（margin）要警惕折叠与隐式行为
设计稿中两个卡片垂直间距标「24px」，你写 margin-bottom: 24px + margin-top: 24px，结果只显示 24px —— 这是 margin 折叠。设计标注的间距，通常指「元素边缘之间的净距离」，不是单侧 margin 值。
- 相邻块级元素间：只取较大 margin，非相加 → 改用单侧 margin（如仅下边距）或 flex/gap
- 父容器与首个/末个子元素：也存在折叠 → 给父容器加
padding替代子元素 margin - 更可控方案：用
gap（Flex/Grid 容器内）或display: flow-root阻断折叠
不复杂但容易忽略，还原精度取决于你是否把每个像素都当成盒模型各层的运算结果，而不是凭感觉“差不多”。
