5 种在 CSS 中隐藏元素的方法

2023/04/24

本文翻译自 Pradeep Pandey 的 “5 Ways to hide an element in CSS⚡⚡”

.element {
  display: none;
}

该元素完全消失，不会在网页上占用空间。

.element {
  visibility: hidden;
}

该元素在视觉上被隐藏，但在网页上仍然占用空间。

.element {
  opacity: 0;
}

该元素将完全透明，但在网页上仍然占用空间。

.element {
  transform: scale(0);
}

它将缩小元素大小，但在网页上仍然占用空间。

.element {
  clip-path: circle(0);
}

它可以完全隐藏该元素，但在网页上仍占用空间。