响应式隐藏元素默认应使用 display:none，因其彻底移除布局、不占空间、兼容无障碍；仅当需保留占位或配合动画时才用 visibility:hidden。
响应式中隐藏元素，绝大多数情况该用 display:none；只有明确需要保留占位、避免布局跳动或配合动画时，才考虑 visibility:hidden。
为什么 display:none 是响应式隐藏的默认选择
小屏下收起导航栏、隐藏广告位、移除非核心图片——这些操作的核心诉求是「让元素真正退出布局」。用 display:none 后，它不占空间、不参与渲染、后续元素自动上移，不会导致内容错位或留白。更重要的是，它让屏幕阅读器跳过该内容，符合语义预期。
常见错误现象：在媒体查询里写 .sidebar { visibility: hidden; }，结果小屏下侧边栏虽然看不见，但主内容区被挤到右侧留出大片空白——这就是误用了占位属性。
- 别指望靠
visibility:hidden来“省事地隐藏”，它不是响应式场景下的安全默认项 - 父元素设了
display:none，子元素无法通过display:block恢复显示（这是继承链上的硬性切断） - 用 JavaScript 切换时，优先操作 class（如
el.classList.toggle('d-none')），而不是直接改style.display，避免覆盖原始 display 值（比如从inline-flex错误回退成block）
visibility:hidden 的适用边界很窄但不可替代
它只在你明确需要「视觉消失但结构不动」时才有价值。典型如轮播图预加载容器：图片还没切换完成，但盒子尺寸必须提前占位，否则每次切换都会引发页面抖动。
立即学习“前端免费学习笔记（深入）”；
注意：它不支持 transition 直接过渡，写 transition: visibility 0.3s 是无效的。真要做淡入效果，得搭配 opacity 或 transform。
- 父元素设
visibility:hidden，子元素设visibility:visible是有效的——这点和display完全不同，可用于局部透出（比如模态框里的关闭按钮） -
getBoundingClientRect()在visibility:hidden下仍返回真实尺寸；而display:none返回全为 0，这对 JS 测量逻辑影响很大 - 屏幕阅读器默认会读取
visibility:hidden内容，如需屏蔽，必须额外加aria-hidden="true"
媒体查询里写错顺序或权重，display:none 可能失效
响应式隐藏常因 CSS 优先级翻车：比如全局样式里写了 .header { display: block; }，而在 @media (max-width: 768px) 里只写 .header { display: none; }，但前者选择器权重更高，none 就被覆盖了。
- 确保媒体查询内的规则选择器权重 ≥ 触发它的基础规则（例如加个
.mobile-layout .header） - 避免在多个断点中反复对同一元素切
display，比如max-width: 768px设none，max-width: 480px又设回block，容易因加载顺序或 specificity 导致意外显示 - 不要依赖
display:none来“禁用”JS 行为——DOM 节点仍在，事件监听器照常绑定，内存泄漏风险比你想象的高
还有更隐蔽的隐藏方式值得留意
当 display 和 visibility 都不够用时，得看具体约束条件：
- 要兼顾无障碍又需动画？用
clip-path: inset(100%)，它支持 transition，DOM 语义完整，且屏幕阅读器可读 - 要做“仅对屏幕阅读器可见”的跳转链接？用
position: absolute; left: -9999px;配合overflow: hidden父容器，但注意老式读屏软件可能误判 - 千万别用
opacity: 0替代隐藏——它仍占位、仍响应点击、仍触发合成层，性能和交互都埋雷
真正卡住人的，往往不是选哪个属性，而是没想清楚：你到底要移除视觉、移除交互、移除语义，还是只移除用户看见的部分。漏掉其中一环，后面排查就容易绕远。
