scroll-margin-top能解决锚点遮挡问题，因为它为单个目标元素设置滚动外边距，使浏览器在锚点滚动时将元素顶部对齐到视口顶部下移指定距离的位置，从而避开固定导航栏；该属性需直接作用于目标元素（如h2[id]），而非body或main，且不参与布局计算、不触发重排。
scroll-margin-top 为什么能解决锚点遮挡
固定导航栏（fixed-top）脱离文档流，浏览器原生锚点跳转会把目标元素顶部对齐视口顶部，结果刚好卡在导航栏下方不可见区域。而 scroll-margin-top 是作用于根滚动容器（html）的“滚动内边距”，它告诉浏览器：滚动定位时，目标元素顶部应停在视口顶部向下偏移指定距离的位置——这个偏移量正好补上导航栏高度。
必须设在 html 上，不能写在 body 或 main
该属性只对滚动容器生效，页面级锚点跳转的滚动上下文是 html 元素（除非你手动设置了 overflow: scroll 的父容器）。写在 body 或 main 上完全无效。
-
html { scroll-padding-top: 60px; }✅ 正确（注意是scroll-padding-top，不是scroll-margin-top——后者是单个元素的属性） -
main { scroll-margin-top: 60px; }✅ 可用于修正单个标题被遮（如h2[id]） -
body { scroll-margin-top: 60px; }❌ 无效果，body不是滚动容器 -
html { margin-top: 60px; }❌ 错误语法，CSS 不支持
响应式导航下怎么同步更新 scroll-padding-top
Bootstrap 的 fixed-top 导航在移动端可能折叠、高度变化（比如桌面 56px → 手机 48px），但 scroll-padding-top 是静态值，不会自动适配。必须用媒体查询或 CSS 自定义属性联动：
- 推荐方式：用
:root定义变量，媒体查询中动态改值，再统一应用到html - 示例：
code:root { --nav-height: 56px; } @media (max-width: 767.98px) { :root { --nav-height: 48px; } } html { scroll-padding-top: var(--nav-height); } - 别直接写
html { scroll-padding-top: 56px; }然后靠 JS 动态改——CSS 属性不支持运行时重写，JS 改只会覆盖整个声明，且易与媒体查询冲突
和 scroll-margin-top 混用时的优先级关系
两者共存时，浏览器会取「更具体」的那个值：如果某个 h2[id] 同时匹配 html 的 scroll-padding-top 和自身 scroll-margin-top，最终生效的是元素自身的 scroll-margin-top。
- 通用兜底：用
html { scroll-padding-top: var(--nav-height); } - 局部微调：对关键标题加
h2[id] { scroll-margin-top: calc(var(--nav-height) + 8px); }（比如想多留点呼吸空间） - 注意：
scroll-margin-top不继承，也不触发重排，但若设为负值可能让元素滚出可视区顶部
实际项目里最容易漏掉的是媒体查询断点和导航真实高度不一致，或者忘了给 html 加 scroll-behavior: smooth 配合平滑滚动——没有它，scroll-padding-top 虽然生效，但跳转过程会显得生硬。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
