必须写在html元素上，因根滚动容器是html而非body；设在body上在Safari等浏览器中常静默失效，且受overflow:hidden影响而禁用。
直接在 html 元素上设 scroll-padding-top，值等于 fixed 头部真实高度，就能让所有锚点跳转自动避开遮挡——这是目前最干净、无副作用的解法。
为什么必须写在 html 上，而不是 body
浏览器的根滚动容器是 html，不是 body。写在 body 上基本无效，尤其在 Safari 和旧版 Edge 中会完全不生效。html 是实际承载滚动行为的容器，scroll-padding-top 必须作用于它才起效。body 上设该属性，在 Chrome 可能偶然有效，但属于非标准行为，不可依赖。
scroll-margin-top 必须作用于目标元素本身
scroll-margin-top 的作用是修正该元素滚动吸附点的位置，只对该元素生效；写在 body、main 或 :target 上均无效或不稳定。
- 常见错误：
body { scroll-margin-top: 60px; }❌ ——body不是滚动容器，无效 -
main { scroll-margin-top: 60px; }❌ —— 除非你手动设置了overflow: scroll，否则main不负责锚点滚动 - 正确写法：
#about, #contact, h2[id] { scroll-margin-top: var(--nav-height); } - 响应式场景下，配合媒体查询更新值，不要用 JS 动态改 CSS 变量
值怎么设才准？单位和兼容性要注意什么
scroll-padding-top 和 scroll-margin-top 的值必须严格匹配 fixed 头部的**真实视觉高度**（含 border、padding），单位推荐 px 或 rem，避免用 %（它按视口宽度计算，不是高度）。
立即学习“前端免费学习笔记（深入）”；
- 别用
%单位——极易错位 -
scroll-margin-top在 Safari 14.1+、Chrome 93+ 支持良好；iOS Safari 需 15.4+，旧版本需降级用 JS 监听scroll+getBoundingClientRect()手动微调 - 若页面同时设置了
overflow: hidden在html或body上，会直接禁用 scroll padding 行为 - 真正容易被忽略的是：这个属性只修正滚动终点，不改变任何布局。如果你发现设置了还是遮挡，第一反应不该是加 JS，而是检查
html是否被意外加了overflow: hidden，或者导航栏高度算错了——这两个问题占了线上故障的八成以上
