以下是关于 CSS 中 display（显示）与 visibility（可见性）属性的中文详解，适合前端初学者或进阶者快速理解它们的区别、用法和应用场景。
一、display 属性（显示）
✅ 作用：
控制元素在页面中的布局行为，也就是：
是否参与文档流、以何种形式渲染（块级、行内、弹性等）。
🔹 常见取值与说明：
| 属性值 | 说明 |
|---|
none | 元素隐藏且不占位，从页面结构中完全移除。 |
block | 元素作为块级元素显示（独占一行、可设置宽高）。 |
inline | 元素作为行内元素显示（不独占一行、不能设置宽高）。 |
inline-block | 行内显示、但可以设置宽高。 |
flex | 将元素设为弹性容器，用于 Flex 布局。 |
grid | 将元素设为网格容器，用于 Grid 布局。 |
table | 模拟表格布局。 |
📌 示例：
.box {
display: none; /* 不显示，且不占据空间 */
}
.nav {
display: flex; /* 弹性布局 */
}
二、visibility 属性（可见性）
✅ 作用：
控制元素是否可见，但它仍然占据空间！
🔹 常见取值与说明：
| 属性值 | 说明 |
|---|
visible | 默认值，元素可见。 |
hidden | 元素不可见，但仍占据空间。 |
collapse | 仅对表格有效，隐藏行/列并移除空间。 |
📌 示例：
.box {
visibility: hidden; /* 看不见，但仍占位 */
}
三、display: none 和 visibility: hidden 的区别
| 对比点 | display: none | visibility: hidden |
|---|
| 是否显示 | ❌ 不显示 | ❌ 不显示 |
| 是否占据空间 | ❌ 不占据空间 | ✅ 仍占据空间 |
| 是否影响布局 | ✅ 会影响其他元素布局 | ❌ 不影响 |
| 是否参与点击等交互 | ❌ 不参与 | ❌ 不参与 |
| 动画/过渡 | ❌ 无法平滑切换 | ✅ 可与 opacity 结合做淡入淡出效果 |
四、常见使用场景
| 场景 | 使用建议 |
|---|
| 完全隐藏元素，不影响布局 | 使用 display: none |
| 仅视觉隐藏，但保留布局结构 | 使用 visibility: hidden |
| 动画过渡（淡入/淡出） | 用 visibility + opacity 结合 transition |
| 切换弹窗、Tab 内容区域 | 推荐使用 display: none/block |
五、动画淡入淡出示例（结合使用）
.fade {
transition: all 0.3s ease;
opacity: 1;
visibility: visible;
}
.fade.hidden {
opacity: 0;
visibility: hidden;
}
<div class="fade hidden">淡入淡出内容</div>
六、浏览器兼容性
| 属性 | 兼容性 |
|---|
display | ✅ 所有浏览器支持 |
visibility | ✅ 所有浏览器支持 |
✅ 小结
| 属性 | 控制什么？ | 是否占位？ | 常用于 |
|---|
display | 显示方式/是否渲染 | ❌ none 不占位 | 切换区域、响应式布局 |
visibility | 是否可见 | ✅ 占位 | 动画、保留布局结构 |
如你想了解 opacity、pointer-events 等与显示效果相关的属性，也可以继续问我！