Skip to main content

CSS 隐藏元素的区别

display: none​

  1. DOM结构: 浏览器不会渲染display:none 的元素, 并且不占据页面空间
  2. 事件监听: 无法对元素进行事件监听
  3. 继承: 不会被子元素继承(子元素设置display: block 不会显示)
  4. 改动: 改动属性值会引起页面的重排和重绘
  5. 过渡: 无法设置过渡效果 transition: display无效

visibility: hidden​

  1. 不会被渲染,但是会占据页面空间
  2. 无法对元素设置事件监听
  3. 可以继承,子元素设置非visibility:hidden可以显示
  4. 改动属性只会引起页面重排
  5. transition:visibility会立即显示, hidden有过渡效果

opacity: 0​

  1. 元素被隐藏, 会占据页面空间
  2. 可以设置事件监听
  3. 可以继承, 子元素设置opacity可以显示
  4. 不会重绘也不会重排
  5. transition: opacity 可以实现显示隐藏的过渡效果
  6. opacity 会触发硬件加速

position: absolute​

大部分人都不会想到第四种

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局 mdisplay 不影响布局但又无法直接交互）。

在这种情况下，只能考虑将元素移出可视区域，这个办法既不会影响布局，有可能让元素保持可以操作。

具体是通过将 position 属性设置为 absolute 来实现（绝对定位）。

position: absolute;
top: -999px;
left: -999px;

clip-path​

隐藏元素的另一种方法是通过剪裁它们实现，具体是通过 clip-path 属性，这个属性比较新，浏览器兼容性也会比较差。

clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);