display与visibility均可隐藏元素，但display: none不占空间且触发重排，visibility: hidden保留空间仅不可见，适用于布局稳定或动画场景。
在css中，控制元素的显示与隐藏主要有两种方式：display 和 visibility。虽然它们都能让元素“看不见”，但作用机制和效果不同，使用时需根据实际需求选择。
1. 使用 display 控制显示与隐藏
display 属性用于定义元素的布局方式，同时也常用来彻底显示或隐藏元素。
常见取值：
- display: block;：元素以块级形式显示
- display: inline;：元素以内联形式显示
- display: none;：元素完全隐藏，不占据页面空间
当设置为 display: none; 时，元素从文档流中移除，其原本占据的空间也会被释放，页面会重新布局。
示例：
div { display: none; /* 元素隐藏，不占空间 */ }
2. 使用 visibility 控制可见性
visibility 属性用于控制元素是否可见，但不影响布局。
立即学习“前端免费学习笔记（深入）”；
常见取值：
- visibility: visible;：元素可见
- visibility: hidden;：元素隐藏，但仍占据原有空间
与 display 不同，visibility: hidden; 只是让元素“看不见”，但它依然存在于页面中，会影响布局，周围元素不会向它位置移动。
示例：
span { visibility: hidden; /* 元素隐藏，但保留空间 */ }
3. display 与 visibility 的主要区别
- 空间占用：display: none 完全移除元素；visibility: hidden 保留空间
- 重排与重绘：display 会触发页面重排（reflow）；visibility 通常只触发重绘（repaint）
- 子元素影响：display: none 会使所有子元素不可见且不渲染；visibility: hidden 的子元素可通过设置 visibility: visible 恢复显示
- 动画支持：visibility 支持过渡动画（如配合 opacity），display 不支持过渡
4. 实际应用场景建议
- 需要彻底隐藏元素并释放空间 —— 使用 display: none
- 只想隐藏元素但保持布局稳定 —— 使用 visibility: hidden
- 做切换显示/隐藏动画时，可结合 visibility + opacity + transition
- 频繁切换显示状态时，若不想引起布局抖动，优先考虑 visibility
基本上就这些。掌握 display 和 visibility 的差异，能更精准地控制页面结构与视觉表现。