当前位置：首页 > 文章列表 > 文章 > 前端 > CSS中display与visibility区别详解

CSS中display与visibility区别详解

2025-11-24 20:47:33 0浏览收藏

想要精通网页布局？CSS的`display`与`visibility`属性是关键！本文深入对比分析了`display`和`visibility`在控制元素显示与隐藏上的差异。`display: none`能让元素彻底从页面消失，不占据任何空间，而`visibility: hidden`则只是让元素不可见，但仍保留其原有布局空间。通过巧妙结合`display`和`visibility`，可以实现更灵活、更精细的网页布局控制，例如创建过渡动画、条件性占位等复杂交互效果。掌握这两个属性的特性和使用场景，能有效提升你的CSS技能，打造更出色的用户体验。了解更多关于CSS元素显示与隐藏的技巧，请继续阅读本文。

display控制元素在文档流中的存在，visibility控制元素的可见性；使用display: none使元素完全消失且不占空间，visibility: hidden则隐藏元素但保留原有布局空间，二者结合可实现灵活的显示与布局控制。

如何使用CSS设置元素显示隐藏_display与visibility结合

在CSS中，display 和 visibility 都可以控制元素的显示与隐藏，但它们的作用机制不同。合理结合使用，可以在不同场景下实现更灵活的布局控制。

display: 控制元素是否在文档流中存在

使用 display: none 会让元素完全从页面布局中移除，不占据任何空间。

相反，display: block（或其他如 inline、flex 等）会恢复元素在文档流中的位置和尺寸。

常见用法：

display: none; —— 元素隐藏且不占空间
display: block; —— 显示块级元素

visibility: 控制元素是否可见

visibility: hidden 会让元素不可见，但它依然占据原来的空间。

visibility: visible 则让元素正常显示。

特点：

visibility: hidden; —— 隐藏但保留占位
visibility: visible; —— 正常显示

结合使用场景示例

有时候需要既隐藏元素又保留其空间，或者根据状态切换显示方式。可以通过组合这两个属性实现精细控制。

例如：一个提示框在特定条件下完全隐藏，其他时候根据状态决定是否透明显示。

CSS 示例：

.tooltip {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip.show {
  visibility: visible;
  opacity: 1;
}

.tooltip.hidden {
  display: none;
}

JavaScript 可这样控制：

// 仅隐藏但保留空间
element.classList.add('show'); // 显示
element.classList.remove('hidden');

// 完全移除
element.classList.add('hidden');
element.classList.remove('show');