display: none彻底移除元素且不占空间，visibility: hidden仅隐藏但保留布局位置，前者触发重排后者仅重绘，性能与布局影响不同。
在CSS中，控制元素的显示与隐藏是常见的布局需求。display 和 visibility 是两个关键属性，虽然都能影响元素的可见性，但作用机制和效果完全不同。下面详细介绍它们的使用方法和区别。
display 属性：控制元素是否渲染
display 属性决定元素如何在页面中布局和是否参与文档流。设置为某些值时，元素将完全不显示，并且不占据空间。
常用取值：- display: block; – 元素以块级形式显示（独占一行）
- display: inline; – 元素以内联形式显示（同行排列）
- display: none; – 元素不显示，也不占用任何页面空间
当设置 display: none; 时，元素从文档流中彻底移除，其原本占据的位置会被其他元素填补。例如：
.hidden {
display: none;
}
立即学习“前端免费学习笔记（深入）”；
这个类应用后，元素不可见，页面布局也会随之调整。
visibility 属性：控制元素是否可见
visibility 属性只控制元素的可见性，不影响其在页面中的位置和布局。
常用取值：
- visibility: visible; – 元素可见（默认值）
- visibility: hidden; – 元素不可见，但仍占据原有空间
使用 visibility: hidden; 后，元素看不见了，但周围的元素不会移动，就像它“隐身”了一样。比如：
.invisible {
visibility: hidden;
}
此时该元素仍然会影响页面布局，只是人眼看不到。
display 与 visibility 的核心区别
理解两者的差异对布局控制至关重要：
- display: none 彻底移除元素，不占空间，子元素也全部消失
- visibility: hidden 只让元素不可见，仍保留空间，子元素也无法通过 visible 恢复
- display 切换会影响页面重排（reflow）和重绘
- visibility 变化仅触发重绘，性能开销较小
实际应用场景建议
根据需求选择合适的属性：
- 需要彻底隐藏并释放布局空间 → 使用 display: none
- 想暂时隐藏但保持布局结构 → 使用 visibility: hidden
- 切换显示状态频繁时，visibility 性能更优
- 配合 JavaScript 动态控制显示，注意 display 值的恢复（如 block、inline 等）
基本上就这些。掌握 display 和 visibility 的特性，能更精准地控制页面元素的呈现方式。
