必须给内容容器加 padding-top，因 fixed 元素脱离文档流导致后续内容从视口顶部起跑，且 body 的 margin-top 易触发外边距折叠；推荐用 CSS 变量 + calc() 动态计算 padding-top，并为跳转目标设 scroll-margin-top。
必须给内容容器加 padding-top，不能靠 margin-top 或指望浏览器自动留空。
为什么 margin-top 在 body 上大概率失效
fixed 元素一脱离文档流，后续内容就从视口顶部“原地起跑”，margin-top 作用在 body 上容易触发外边距折叠（margin collapse），尤其当第一个子元素是块级时，实际偏移可能为 0。这不是 bug，是 CSS 渲染规则本身决定的。
- ✅ 推荐：给
body或主内容区（如main）设padding-top: 60px（值等于头部高度） - ❌ 避免：对
body设margin-top，除非你明确控制了所有子元素的 margin 行为 - ⚠️ 注意：如果用了
overflow: hidden或scrollbar-gutter，padding可能影响滚动条位置或触控体验
响应式场景下怎么应对高度变化
写死 60px 在缩放、横竖屏切换或字体放大时会露馅。优先用 CSS 变量 + calc() 组合，必要时配合 JS 动态更新。
- 定义变量：
:root { --nav-height: clamp(48px, 8vw, 72px); } - 应用预留：
body { padding-top: calc(var(--nav-height) + env(safe-area-inset-top)); } - JS 监听：
resize事件里读取getBoundingClientRect().height，再写入style.setProperty('--nav-height', ...) - ⚠️ 关键前提：fixed 头部自己必须有显式
height或min-height，否则所有计算都失去基准
锚点跳转时内容被遮住怎么办
点击 #section-2 跳过去，结果第一行文字卡在 fixed 头部底下——这不是布局没留空，而是浏览器滚动定位默认把目标元素顶到视口顶部。
立即学习“前端免费学习笔记（深入）”；
- 直接给目标元素加：
scroll-margin-top: calc(var(--nav-height) + 8px); - 兼容旧版 Safari（scrollIntoView({ block: 'start', behavior: 'smooth' }) + 手动减去头部高度
- 别依赖
window.innerHeight算偏移：滚动中这个值会随地址栏收起/展开而变，应改用document.documentElement.clientHeight
iOS Safari 中 fixed 头部突然跳动或消失
iOS 15+ 的 Safari 对 position: fixed 做了滚动优化，在地址栏收起/展开瞬间会重排，导致 fixed 元素错位甚至短暂消失。
- 缓解方案：
.header { transform: translateZ(0); }或will-change: transform; - 避免同时设
top和bottom（比如想撑满高度），iOS 会无法判断该听谁 - 删掉
<meta name="viewport" content="..., height=device-height">—— 它会让 fixed 行为更不可控
最常被忽略的一环是：fixed 头部自身是否稳定——没设 height 或 line-height 导致文字换行后高度浮动，所有基于固定数值的 padding、scroll-margin-top 就全乱了。先稳住它，再谈其他。
