display: none使元素完全移除文档流，不占空间且无法交互；2. visibility: hidden仅隐藏元素但保留布局空间；3. 前者用于彻底隐藏，后者适用于需保持占位的场景。
在CSS布局中，控制元素的隐藏与显示是常见需求。虽然display和visibility都能实现“隐藏”效果，但它们的行为机制完全不同，使用场景也各有侧重。
display: none 的彻底隐藏
设置display: none会让元素完全从文档流中移除：
- 元素不占据任何空间
- 无法被点击或获取焦点
- 子元素也会一同被隐藏
- 屏幕阅读器通常会忽略该元素
适合用于需要完全“消失”的场景，比如响应式设计中隐藏某个模块，或动态切换内容区域。
visibility: hidden 的视觉隐藏
使用visibility: hidden仅让元素不可见，但依然保留在布局中：
立即学习“前端免费学习笔记（深入）”；
- 元素仍占据原有空间
- 不能看到，但结构存在
- 部分情况下仍可触发事件（取决于具体设置）
- 常用于临时隐藏但仍需保留占位的场景
例如制作下拉菜单时，隐藏的子菜单仍保持位置，避免页面跳动。
对比与选择建议
关键区别在于是否影响布局：
- 用
display: none时，页面会重新排布 - 用
visibility: hidden时，空白位置保留 - 动画中慎用
display切换，因不能过渡 -
visibility支持transition，可做淡出效果
基本上就这些。根据是否需要保留空间来决定用哪个属性，理解清楚行为差异，能更精准地控制页面布局表现。
