CSS隐藏元素的五种方法

  平常在写代码的时候有比较常用到几种隐藏元素的方法，在参考了许多大神的笔记之后，整理了一下关于隐藏元素的如下五种方法：

1、display：none；

div {
  display:none;
}

display:能将元素真正隐藏，而且隐藏的元素不会占据任何空间，会让人觉得这个元素好像完全不存在。但是该元素是能够被访问到的，可以通过DOM来操作这个元素。

2、opacity:0;

div {
   opacity:0;
}

opacity:这个方法是通过给元素设置透明度，从视觉上来隐藏元素的一种方法。元素本身存在，并且占据原有的位置。

3、visibility：hidden；

div {
   visibility：hidden;
}

visibility:这个方法和opacity一样，隐藏起来依然能作用于网页布局，但是它和opacity不一样在于它不会响应任何用户交互。

注意：如果一个元素的 visibility 被设置为 hidden，同时想要显示它的某个子孙元素，只要将那个元素的 visibility 显式设置为 visible 即可。

4、position：

div {
   position: absolute;
   top: -9999px;
   left: -9999px;
} 

position:这个方法是通过将left和top的值设的很大，让元素在我们不可见的区域中去。

5、clip-path

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

clip-path:这个方法是通过裁剪元素来实现的，通过为我们提供了一系列的坐标来创建路径也就是我们常常说的X，Y。当创建完一个闭合的路径时，位于路径内部的区域就可见，而路径外的区域就不可见。这样就实现了裁剪效果。我们可以用这个属性来创建各种图形，如圆形，多边形，三角形，椭圆形等等。更多扩展大家可以点击该链接，有实例拓展。关于clip-path实例拓展点击打开链接