会错位或撑高页面，因details是块级元素且summary有默认边距；建议用max-height过渡替代，配合44×44px触控热区与fixed/visibility占位策略。
顶部通栏用 details 会错位或撑高页面吗？
会，而且很常见。details 默认是块级元素，且内部 summary 有默认上下 margin 和 padding，直接塞进页头（比如 <header></header>）里，容易导致高度突变、文字基线偏移、甚至触发不必要的重排。
- 不要直接把
details当作“通栏容器”用，它语义是「可折叠的独立信息块」，不是布局工具 - 如果顶部通栏本身是固定定位（
position: fixed），details的显隐切换还会引发滚动条抖动（因内容高度变化影响 viewport 高度） -
summary默认带display: list-item，在 flex 或 grid 容器中可能破坏对齐，需显式重置为display: block
建议只在语义合理、且不参与顶部导航流的位置使用 details（例如通栏里的「公告栏」子模块），而非整个通栏本身。
用 max-height + transition 实现平滑收起更可控
这是目前最稳的通用方案：不依赖 JS 控制 display，也不强求语义完美，专注视觉表现与行为一致性。
- 初始状态设
max-height: 0+overflow: hidden，避免内容闪出 - 展开时设
max-height: 60px（或略大于通栏实际高度的值，如80px） - 必须配
transition: max-height 0.3s ease-in-out，否则无动画 - 不要用
height: auto过渡——浏览器无法计算 auto 值的变化路径，动画会跳变或卡死
.top-banner {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.top-banner.open {
max-height: 80px;
}配合 JS 切换 .open 类即可，无需操作内联样式。
立即学习“前端免费学习笔记（深入）”；
点击区域太小、移动端点不灵怎么修？
顶部通栏常被压缩成窄条（比如仅 32px 高），但触控热区必须 ≥ 44×44px 才符合可访问性标准。
- 不要把点击事件绑在通栏自身上，而是单独加一个
<button></button>或<label></label>，用position: absolute覆盖在右上角/左上角 - 给该按钮设
width: 44px、height: 44px、top: 0、right: 0（或居中），再用z-index确保可点 - 若用
label配合隐藏 checkbox，确保for和id严格匹配，且 checkbox 在 DOM 中紧邻 label - 移动端务必加
touch-action: manipulation到按钮上，防止 iOS Safari 误判为滑动手势
折叠后要不要保留占位空间？
取决于通栏是否影响下方内容布局：
- 如果通栏是
position: fixed，折叠后应完全消失（max-height: 0即可），下方内容不受影响 - 如果通栏是文档流内元素（比如
position: static），折叠后留白会导致主内容上跳，此时建议用visibility: hidden+height: 0+overflow: hidden组合，保持占位但不可见 - 更健壮的做法是：折叠时给通栏加
pointer-events: none，同时用aria-hidden="true"告知屏幕阅读器，避免键盘焦点落入已隐藏区域
复杂点在于，很多顶部通栏既要响应式收起，又要支持“展开后自动关闭”（比如点击外部区域），这类逻辑必须靠 JS 监听 click 和 focusout，纯 CSS 无法覆盖。
