是的，固定底部导航栏会导致锚点跳转后目标元素底部被遮挡；应使用 scroll-margin-bottom 为目标元素设置底部滚动偏移，而非 padding/margin，兼容性不足时需用 js fallback。
导航栏高亮依赖 :target 时，底部固定会失效？
是的，:target 本身不关心定位元素是否固定，但「固定定位 + 锚点跳转」常导致视觉错位：点击链接后页面滚动，:target 确实生效了，可被高亮的 <section id="xxx"></section> 被固定导航栏遮挡，看起来像没选中。
根本原因不是 :target 失效，而是浏览器把锚点元素顶部对齐视口顶部，而 position: fixed 的导航栏占了顶部空间，没给它留偏移。
- 用
scroll-margin-top给目标元素“预留上边距”，比如section:target { scroll-margin-top: 60px; }（60px 对应导航栏高度） - 不要用
padding-top或margin-top模拟——它们影响布局流，可能撑开内容或破坏原有间距 -
scroll-margin-top是滚动行为专属偏移，不影响渲染盒模型，兼容性也够好（Chrome 69+、Firefox 68+、Safari 15.4+）
:target 高亮样式写在哪？别套在 nav 上
:target 匹配的是 URL 中 # 后的 ID 对应的**目标元素本身**（比如 <section id="contact"></section>），不是导航项。想让导航里的 <a href="#contact"></a> 高亮，必须靠 JS 或结构联动，纯 CSS 无法反向匹配。
常见错误是写成：nav a:target { color: red; }——这永远不生效，因为 a 元素自己没被设为锚点目标。
- 正确做法：给每个导航项
<a></a>加一个能和目标id对应的data-target，再用 JS 监听hashchange，手动加类 - 如果坚持纯 CSS，只能把高亮逻辑放在目标区域上，比如
section:target .nav-link-contact { color: #007bff; }，但要求 HTML 结构里导航项和目标区有明确层级或属性关联 - 注意：CSS 属性选择器如
a[href$="#contact"]无法响应 URL 变化，它只在初始渲染时匹配，hashchange不触发重绘
固定底部导航栏的 :target 行为要额外处理滚动
你写的是「固定底部」，不是顶部。那问题就反过来：锚点跳转后，目标元素底部被底部导航栏挡住，:target 样式虽生效，但关键内容看不见。
这时候 scroll-margin-bottom 才是解药，而不是 scroll-margin-top。
- 给目标元素设置
scroll-margin-bottom: 80px;（假设底部导航高 80px），让浏览器滚动时把它的底边停在视口底边往上 80px 的位置 - 不能只靠
margin-bottom或padding-bottom，它们会让元素自身变高，可能引发多余滚动条或布局塌陷 - 若目标元素本身是
display: flex或height: 100vh类型，需确认其实际尺寸是否允许底部留白，否则scroll-margin-bottom会被忽略
IE 和旧 Safari 下 :target + 固定定位基本不可用
IE 完全不支持 scroll-margin-* ；Safari 15.4 之前只支持 scroll-margin（四边统一），不支持单边；更老版本连 :target 的滚动行为都不可靠。
这意味着：如果你的用户包含大量 iOS 15.3 及更早设备，或仍需兼容 IE，这套方案就得降级。
- 降级方案优先用 JS：监听
hashchange，调用element.scrollIntoView({ behavior: 'smooth', block: 'end' })并传入偏移量 - CSS 方案里，可以用
@supports做渐进增强：@supports (scroll-margin-bottom: 1px) { section { scroll-margin-bottom: 80px; } } - 别指望
body { padding-bottom: 80px; }来兜底——它会让整个页面内容上移，底部导航反而悬空，且无法精准控制滚动停靠点
真正麻烦的不是写法，是得同时维护两套滚动逻辑：CSS 的声明式行为和 JS 的命令式 fallback，而且得在 hash 改变瞬间判断环境是否支持，再决定走哪条路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
