display: none 使元素完全消失且不占空间，适用于响应式中彻底隐藏非核心内容；2. visibility: hidden 仅隐藏元素但保留布局空间，适合需维持结构的场景；3. 根据布局影响与可访问性需求选择合适方式，并可结合 opacity、clip 等属性优化交互体验。
在CSS响应式布局中，控制元素的显示与隐藏是常见需求。不同设备尺寸下，我们常需要隐藏某些内容以优化用户体验。使用 display 和 visibility 可实现隐藏效果，但它们的行为和适用场景有明显区别。
display: none 与隐藏逻辑
display: none 完全从文档流中移除元素，不占据任何空间，适合在响应式设计中彻底隐藏不需要的内容。
- 元素不可见，也不影响页面布局
- 屏幕阅读器通常会忽略该元素
- 常用于移动端隐藏侧边栏、大屏广告等非核心内容
示例：在小屏幕上隐藏导航菜单中的次要链接
@media (max-width: 768px) {
.nav-extra { display: none; }
}
立即学习“前端免费学习笔记（深入）”；
visibility: hidden 的隐藏特性
visibility: hidden 让元素不可见，但仍保留其在布局中的位置，空间不会被释放。
- 元素看不见，但占据原有空间
- 可用于临时隐藏但仍需保留布局结构的情况
- 动画或过渡中可配合使用避免布局跳动
例如：在加载过程中隐藏图标但保持按钮尺寸不变
.icon { visibility: hidden; }
响应式中选择合适的隐藏方式
根据实际需求判断使用哪种方式更合适：
- 想让元素完全消失且不占空间 → 用 display: none
- 只想看不见但保留位置 → 用 visibility: hidden
- 需要支持无障碍访问时，考虑用视觉隐藏技巧（如移出视区）而非 display: none
补充技巧：结合其他属性优化体验
有时可以组合使用CSS属性实现更灵活的隐藏效果。
- 用 opacity: 0 配合 pointer-events: none 实现透明且不可交互
- 使用 clip 或 clip-path 做局部隐藏（注意兼容性）
- 借助 CSS 自定义属性动态切换显示状态
基本上就这些。关键在于理解每种方法对布局和可访问性的影响，在响应式项目中按需选用。
