做不到像素级复现的核心原因是设计稿标注、浏览器渲染逻辑与css盒模型未对齐：设计师量的是含padding/border的外轮廓总尺寸，而默认content-box下width仅指内容区，需统一box-sizing:border-box、换算逻辑像素、处理字体度量及margin折叠。
做不到像素级复现，不是因为写错了样式，而是没把设计稿标注、浏览器渲染逻辑、CSS盒模型三者对齐。核心矛盾在于：设计师量的是「外轮廓总尺寸」，而默认 CSS 的 width 只管内容区——中间差了 padding、border、box-sizing、字体度量和 margin 折叠。
确认设计稿单位与 CSS 逻辑像素的换算关系
设计师给的「16px 字体」或「宽度:375px」，不是图片上直接量出的物理像素数，而是设备无关的逻辑像素（CSS px）。常见误区是照着 @2x 切图量出 32px 就写 font-size: 32px，结果在普通屏上放大一倍。
- 若标注注明 @2x 或「Retina」，则所有数值除以 2 再写进 CSS（如切图量出 44px 高按钮 →
height: 22px） - 若标注写「375pt」且来自 iOS 原型，按 1pt = 1px 换算，直接用
width: 375px - 用浏览器开发者工具的「测量模式」（Ctrl+Shift+C 后悬停）比对真实渲染尺寸，反向验证换算是否成立 —— 这比看设计稿更可靠
统一 box-sizing: border-box 并重置全局
设计稿标注的「宽度」几乎全是「含 padding 和 border 的总宽」，而 CSS 默认 box-sizing: content-box 下，width 只算内容区。不统一就会系统性偏大，且越嵌套误差越大。
- 必须在项目入口 CSS 最开头加：
* { box-sizing: border-box; }（注意：不要只写div或.container，要覆盖所有元素） - 重置后，
width: 100px; padding: 12px; border: 1px solid #000;渲染总宽就是 100px，内容区自动压缩为 76px - 个别需要 content-box 的场景（如某些 canvas 容器），显式声明
box-sizing: content-box，避免继承污染
处理字体度量与行高导致的高度偏差
设计稿里一个「高度 44px 的按钮」，如果里面是 16px 字体 + 垂直居中，实际渲染高度往往不是 44px —— 因为字体本身有上沿（ascent）、下沿（descent）、行距（line gap），line-height 控制的是整行高度，不是字形高度。
- 不要依赖
height强制压字体，优先用padding控制容器高度（如padding: 12px 16px得到 44px 总高） - 若必须设
height，配合display: flex; align-items: center;居中，比line-height更可控 - 遇到中文字体（如 PingFang SC、Microsoft YaHei）在 Chrome/Firefox 渲染差异大时，加
font-feature-settings: "liga"或统一指定font-family避免回退
警惕 margin 折叠与父容器塌陷带来的布局偏移
两个相邻块级元素的上下 margin 会合并取较大值；父元素没边框/内边距时，第一个子元素的 margin-top 会“穿透”出来 —— 这些都会让视觉间距和设计稿不符，且难以肉眼定位。
- 垂直间距统一用
padding实现（如卡片间距离用父容器padding-bottom，而非子元素margin-bottom） - 必须用
margin时，给父容器加overflow: hidden或border: 1px solid transparent触发 BFC，阻止塌陷 - 用开发者工具「Computed」面板逐层检查
margin是否被折叠，而不是只看 Styles 面板写的值
最常被忽略的不是某个属性写错，而是把设计稿当“最终像素值”直接抄，却没意识到它背后是一套包含设备像素比、字体渲染引擎、盒模型计算规则的完整链路。还原不是临摹，是逆向推导渲染逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
