如何通过css设置元素显示隐藏display与visibility

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 属性用于控制元素是否可见，但不影响布局。

立即学习“前端免费学习笔记（深入）”；

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

• 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 的差异，能更精准地控制页面结构与视觉表现。

以上就是如何通过css设置元素显示隐藏display与visibility的详细内容，更多请关注php中文网其它相关文章！