display: none 完全移除元素且不占空间，引发重排；visibility: hidden 仅隐藏但保留占位，仅重绘。
在CSS中隐藏元素常用的方法是使用 display: none 和 visibility: hidden，虽然它们都能让元素“看不见”，但行为上有本质区别。
display: none 完全移除元素
设置 display: none 的元素会从文档流中完全移除，不占据任何空间，页面布局会像该元素不存在一样重新排列。
特点：- 元素不可见，也不占用页面空间
- 不会响应点击、事件或获取焦点
- 子元素也会一同被隐藏
- 可能导致页面重排（reflow）和重绘（repaint）
适用于：永久性隐藏元素，或者需要节省布局空间的场景。
visibility: hidden 隐藏但占位
设置 visibility: hidden 的元素只是视觉上不可见，仍然占据原有空间，页面布局不会改变。
立即学习“前端免费学习笔记（深入）”；
特点：- 元素看不见，但位置保留
- 仍可能触发某些事件（取决于具体设置）
- 子元素可通过 visibility: visible 恢复显示
- 只引起重绘，不引发重排
适用于：临时隐藏元素但仍需保留其占位，比如动画切换过程。
关键区别总结
| 属性 | 是否占空间 | 是否在文档流中 | 是否可交互 | 性能影响 |
|---|---|---|---|---|
| display: none | 否 | 否 | 否 | 重排 + 重绘 |
| visibility: hidden | 是 | 是 | 通常否（但位置还在） | 仅重绘 |
基本上就这些。选择哪个方法取决于你是否希望元素继续占位以及对布局的影响程度。不复杂但容易忽略细节。
