谈谈CSS隐藏元素(display,visibility)的区别

下面我将详细讲解“谈谈CSS隐藏元素(display,visibility)的区别”。

1. display与visibility的区别

1.1 display属性

display属性用于设置元素在页面中的显示方式。通过设置display属性，我们可以让元素被隐藏或显示。常见的display取值包括：none、block、inline、inline-block等。

• none：完全隐藏元素，不占据页面文档流中的位置和空间。
• block：将元素显示为块级元素，会在前后添加换行符，且默认占满父容器的宽度。
• inline：将元素显示为内联元素，不会添加换行符，会自动根据内容大小进行调整。
• inline-block：将元素显示为同行的块级元素，不会添加换行符，也能够通过设置宽高等样式进行调整大小和位置。

以文字与图片为例，如下所示：

.text {
  display: none;
}

.img {
  display: block;
}

上述代码中，将文本元素设置为none，即在页面中完全隐藏元素。将图片元素设置为block，表示将图片元素显示为块级元素，并占用父容器的宽度，图片能够正常显示。

1.2 visibility属性

visibility属性用于设置元素的可见性。通过设置visibility属性，我们可以让元素被隐藏或显示。visibility常见的取值包括：visible、hidden、collapse。

• visible：默认值，元素可见。
• hidden：元素隐藏，但在页面文档流中占据位置和空间。
• collapse：元素被隐藏，且表格边框被合并在一起。

以按钮为例，如下所示：

button {
  visibility: hidden;
}

上述代码中，将按钮元素的visibility设置为hidden，即使按钮元素被隐藏，但在页面文档流中仍然占据位置和空间。

2. display与visibility的适用场景

2.1 display的适用场景

display属性适用于需要隐藏或显示元素，并且需要影响页面布局的情况下，比如弹出层、交互动效等。

以弹出层为例，如下所示：

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.modal.show {
  display: block;
}

上述代码中，将弹出层元素的display设置为none，表示默认情况下弹出层不显示。当需要展示弹出层时，通过为元素添加show类名，将弹出层元素display设置为block，即可在页面中显示弹出层。

2.2 visibility的适用场景

visibility属性适用于需要实现元素隐藏或显示，但不影响页面布局的情况下，比如鼠标悬停显示提示信息等。

以提示信息为例，如下所示：

.tip {
  visibility: hidden;
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #fff;
  padding: 10px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.hover {
  position: relative;
}

.hover:hover .tip {
  visibility: visible;
}

上述代码中，将提示信息元素的visibility设置为hidden，表示默认情况下提示信息不显示。当鼠标悬停在提示信息元素的父元素上时，为父元素添加hover类名，通过设置子元素的visibility为active来显示提示信息。