display: none 彻底移出文档流，不占空间、不可交互；visibility: hidden 仅视觉隐藏，保留位置、可被子元素覆盖显示。
想让元素隐藏但又不占空间，用
display: none
；如果只是“看不见”，但还想留着它原来的位置和布局空间，就用
visibility: hidden
。两者核心区别不在“藏不藏”，而在“占不占位”。
display: none —— 彻底移出文档流
元素不仅不可见，还会从渲染树中被完全移除，不占据任何空间，也不影响其他元素的布局。
父元素高度会塌缩（比如空 div 不再撑高）
后续兄弟元素会上移填补空缺
无法触发 hover、focus 等交互事件（因为已不存在于渲染树）
屏幕阅读器通常会跳过该元素
visibility: hidden —— 隐藏但保留位置
元素视觉上消失，但仍在文档流中，占据原有尺寸和位置，周围元素布局不受影响。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
父容器仍按它原来的宽高计算布局
鼠标悬停或点击该区域，不会触发事件（但可通过
恢复）
子元素若设为
，可重新显示（这是 display 不具备的特性）
屏幕阅读器可能仍会读取内容（取决于具体实现）
其他“看似隐藏”的方式对比
有些写法容易混淆，实际效果不同：
立即学习
“
前端免费学习笔记（深入）
”；
：透明但可交互、占位、能触发事件
：移出视口，但仍在文档流（除非配合
或
）
：强制收缩，适合隐藏内容但保留结构
怎么选？看你的需求
需要彻底“消失且不干扰布局” → 用
display: none
需要“暂时隐藏但保持页面稳定”（如切换菜单、动画过渡）→ 用
visibility: hidden
需要隐藏同时保留可访问性或支持子元素显隐控制 → 优先考虑
visibility
visibility: visiblevisibility: visibleopacity: 0position: absolute; left: -9999pxcliptransformwidth: 0; height: 0; overflow: hidden