CSS – display:none vs visibility: hidden vs opacity: 0

前言

要让一个元素"消失", 有 3 种做法. 它们有一点点的不同. 在实战时要清楚什么时候用什么哦.

例子说明

<div class="abc">
  <div class="xyz"></div>
</div>

CSS Style

.abc {
  border: 1px solid red;
  width: max-content;
  .xyz {
    width: 100px;
    height: 100px;
    background-color: red;
  }
}

效果

opacity: 0

opacity 是让元素透明. 虽然看不到, 但是占据空间, 同时可被触碰 (e.g. hover).

.xyz {
  opacity: 0;
  &:hover {
    opacity: 1;
  }
}

效果

虽然看不见, 但是占据空间, 而且可以 hover.

visibility: hidden

它比 opacity 厉害一点, 看不见, 同时也触碰不到了, 但依然占据空间.

.xyz {
  visibility: hidden;
  &:hover {
    visibility: visible;
  }
}

效果

已经 hover 不到了, 但它依然占据空间.

display: none

它才是真正让元素消失的, 看不见, 不占空间, hover 不到.

.xyz {
  display: none;
  &:hover {
    display: block;
  }
}

效果

由于不占据空间了, 只剩下 container 的 1px border. 所以只看见小红点.

总结

opacity 看不见, 占空间, 能触碰  (re-paint)

visibility 看不见, 占空间, 不能触碰 (re-paint)

display: 看不见, 不占空间, 不能触碰 (re-flow)

fade in 效果

display none 转换 display: block 是没有 transition 效果的.

所以通常用 visibility + opacity 来实现 fade in. 但要注意空间的问题, 因为 visibility 是占据空间的. 

有时候会用 height: 0 来帮助消失空间. 但也要注意 height: 0 的冷知识 哦.

标签：opacity,none,hover,xyz,visibility,vs,空间,display
来源： https://www.cnblogs.com/keatkeat/p/15956461.html