CSS 隐藏页面元素的 5 种方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/b954960630/article/details/82344222

用 CSS 隐藏页面元素的方法：

• 将 opacity 设为 0
• 将 visibility 设为 hidden
• 将 display 设为 none
• 将 position 设为 absolute ，并将其抛到不可见区域
• clip-path

1、Opacity

• 将元素设为透明。虽然看不见了，但仍在 渲染树 中，因而元素依然占据它原有的位置。
• 它只是变透明了，所以仍然能 响应用户交互。

.hidden{
　　　opacity:0;
　　　filter:alpha(opacity=0);  //filter 过滤器   兼容IE678
}

2、Visibility

• 仍在 渲染树 中，因而元素依然占据它原有的位置。
• 与 opacity 不同的是：它不会响应任何用户交互

.hide {
   visibility: hidden;
}

3、Display

display:none后元素就 不在 渲染树 中了，因而它被隐藏后也不占据任何空间，所以 就更别谈响应用户的交互了。

.hide {
   display: none;
}

4、Position (absolute/fixed)

用position:absolute/fixed把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

5、clip-path

该属性是通过裁剪的方法实现隐藏的。被隐藏的内容依然占据着那个位置，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。此外，这个属性能够使用各种过渡动画来实现不同的效果。

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}