CSS中，有哪些方式可以隐藏页面元素？有什么区别？

1、display:none

可以完全隐藏元素，也不会占用空间。该元素将从布局中删除，但是会导致浏览器的重排和重绘.
消失后，自身绑定的事件不会触发，也不会有过渡效果
特点：元素不可见，不占据空间，无法响应点击事件,会导致浏览器的重排和重绘

2、visibility:hidden

从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘.

特点：元素不可见，占据页面空间，无法响应点击事件,不会触发重拍，会触发重绘。

3、opacity:0

可以将元素变为透明状态，但仍然存在于布局中，因此占用空间和可交互。不会引发重排，一般情况下也会引发重绘.
需要注意的是：其子元素不能设置opacity来达到显示的效果

特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件.

4、设置height、width模型属性为0,overflow:hidden

将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素

特点：元素不可见，不占据页面空间，无法响应点击事件

5、position:absolute

将元素移出可视区域
特点：元素不可见，脱离文档流不影响页面布局

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

6、clip-path

通过裁剪的形式

特点：元素不可见，占据页面空间，无法响应点击事件

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

区别

	display:none	visibility:hidden	opacity:0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

`

总结：大功告成✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️