答案：visibility控制元素视觉显示但保留布局空间，display决定元素是否参与布局；visibility:hidden隐藏元素但仍占位，display:none则完全移除元素且不占空间；结合使用可实现动画效果与布局优化，注意可访问性与重排影响。
在网页开发中，控制元素的显示与隐藏是常见需求。CSS 提供了多种方式实现这一功能，其中 visibility 和 display 是两个关键属性。虽然它们都能影响元素的可见性，但作用机制不同，结合使用可以实现更灵活的效果。
visibility 属性：控制视觉可见性
visibility 属性用于控制元素是否在视觉上可见，但不影响页面布局。
- visibility: visible — 元素正常显示
- visibility: hidden — 元素不可见，但仍占据文档流中的空间
这意味着即使元素“隐藏”了，它原来的位置仍然被保留，周围的元素不会重新排列。
display 属性：控制布局存在性
display 属性决定元素是否出现在渲染树中，直接影响布局。
立即学习“前端免费学习笔记（深入）”；
- display: block / inline / flex 等 — 元素正常渲染
- display: none — 元素完全从文档流中移除，不占空间，也不可交互
设置为 display: none 后，元素如同不存在，其他元素会填补其位置。
结合使用场景与技巧
单独使用任一属性都有局限，合理搭配能应对复杂需求。
- 想临时隐藏元素但仍保留布局空间？用 visibility: hidden
- 想彻底移除元素并释放空间？用 display: none
- 需要动画控制显隐？可先用 display 控制整体开关，再用 visibility 配合 opacity 实现淡入淡出
- 避免重排（reflow）时，优先选 visibility；需节省空间时选 display: none
例如下拉菜单关闭时，可用 display: none 隐藏整个模块；而子项过渡动画期间，可配合 visibility: hidden 和 opacity 控制视觉消失节奏。
注意事项与兼容性
两者都支持所有主流浏览器，但行为差异容易引发误解。
- visibility: hidden 的子元素无法通过设置 visible 来单独显示（除非父级为 hidden 且子级未覆盖）
- display: none 的元素及其子元素完全脱离渲染，JS 获取宽高将为 0
- 屏幕阅读器对 display: none 内容通常忽略，而 visibility: hidden 可能仍会被读取
因此语义和可访问性也要纳入考虑。
基本上就这些。掌握 visibility 与 display 的区别和协作方式，能让你更精准地控制页面结构与视觉表现。不复杂但容易忽略细节。
