scroll-margin-top 必须写在带 id 的目标元素上，如 #about 或 section[id]，而非 body 或 :target；其值需严格匹配导航栏真实高度，并配合 display: flow-root 防浮动塌陷，避免与 scroll-padding-top 叠加使用。
scroll-margin-top 必须写在目标元素上，不是 body 或 :target
它只对带 id 的锚点目标生效，比如 #about 或 section[id]。写在 body、main 或 :target 上要么无效，要么不稳定。
常见错误现象：点击锚点后内容仍被遮挡，DevTools 里检查发现 scroll-margin-top 根本没生效。
-
body { scroll-margin-top: 64px; }❌ ——body不是滚动定位的“吸附主体”，浏览器忽略 -
:target { scroll-margin-top: 64px; }⚠️ —— Safari 偶现失效，且无法响应不同页面的导航栏高度变化 - 正确写法：
#contact { scroll-margin-top: 64px; }✅ 或section[id] { scroll-margin-top: 4rem; }✅
数值必须严格匹配固定头部真实视觉高度
scroll-margin-top 的值不是“大概估”，而是要等于导航栏实际占据的垂直空间——包括 height、padding-top、border-top-width，甚至 box-shadow 的扩散部分。
用 DevTools 的 Computed 面板查导航栏的总高度，别只看 CSS 里写的 height。
- 移动端导航栏折叠后变矮？不能写死
64px，要用媒体查询：@media (max-width: 768px) { #about { scroll-margin-top: 48px; } } - 推荐抽成 CSS 变量统一管理：
:root { --nav-height: 64px; }，再写#faq { scroll-margin-top: var(--nav-height); } - 避免混用单位：导航栏用
rem，scroll-margin-top就别用px，否则缩放时偏差明显
浮动塌陷会让 scroll-margin-top 失效
如果目标元素父容器内部有 float 元素且未清除，会导致 getBoundingClientRect() 返回的位置失真——scroll-margin-top 再大也没用。
必须先让父容器恢复真实高度，再设偏移。
- 给锚点父容器加
display: flow-root;（比overflow: hidden更安全，不裁剪position: absolute子元素） - 不要同时用
overflow: hidden和flow-root，后者已足够 - 示例：
.section-wrapper { display: flow-root; } #about { scroll-margin-top: 60px; }
scroll-margin-top 和 scroll-padding-top 别叠加使用
两者作用机制不同，但最终都影响滚动终点位置。如果同时设置，浏览器会把两个值相加，导致过度上移。
比如：html { scroll-padding-top: 64px; } + #about { scroll-margin-top: 20px; } → 实际上移 84px。
- 全站导航栏高度统一？优先用
html { scroll-padding-top: var(--nav-height); } - 只有个别区块需要额外留白（如 FAQ 区块上方还要加个提示条）？才单独加
scroll-margin-top - 用了
position: sticky导航栏？scroll-padding-top会失效，老老实实用scroll-margin-top + display: flow-root
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
