CSS隐藏元素的几种方式以及display、visibility、opacity的区别
CSS隐藏元素的方式
首先最通用且最易想到的方法肯定是display、visibility和opacity这三种了
display:none
设置元素不可见并且连盒模型也不生成，一般用于不占空间的隐藏元素。
display属性规定元素应该生成的框的类型，当其值为“none”时可以规定元素不生成框，隐藏该元素，可以理解成在页面中把该元素删除掉一样。
visibility:hidden
visibility属性可以设置元素是否可见。 visible为可见，hidden为不可见，占据空间。 而如果父元素为visibility:hidden，但若将其子元素设为visibility:visible，则子元素依旧可见。
opacity:0
opacity可以设置透明度，0～1. 但是，设置透明度为0，虽然元素也看不见了，但是它确实依旧存在页面中且占据位置的，有时候会影响用户交互。
overflow:hidden
这个也可以实现元素隐藏，不过有点局限性是 只能超出盒子的部分隐藏
移出视口
利用定位直接将元素的top和left值设置的足够大的负数，就可以把它移出视口，也就是屏幕上看不见。
如： left:-9999px 或 transform:translateX(-9999px)
z-index
将元素的z-index设为负值，也可以实现隐藏效果。相当于至于了最最底层
覆盖
比如有一个正方形的盒子，但现在不需要了，可以在其上面放置一个和背景色相同的元素，这样视觉角度是隐藏了。 可以用 ::after伪元素实现
display、visibility、opacity的区别
相同之处都是能够实现元素的隐藏效果
区别：
性能
visibility:hidden 比 display:none 在性能上会好一些，因为display:none在切换显示与隐藏时，页面会产生回流和重绘。 而 visibility和opacity不会产生回流
是否占据空间
display 不会在文档流中占位，浏览器也不会解析该元素，相当于就没有这个元素了。
visibility依旧在文档流中占位，浏览器也会解析该元素，只是视觉上消失了。
动画效果
transition对 display和visibility是无效的，对opacity是有效的
事件绑定
display:none就认为它已经不存在了，所以自然是无法触发上面绑定的事件；
visibility虽然占据空间，但也无法触发
opacity是可以触发绑定事件的
子元素继承
display:none 不会被子元素继承,给子元素设置display：block;子元素不会显示；
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible ；可以让子元素显示出来；
opacity: 0 也会被子元素继承，给子元素设置opacity: 1；子元素不会显示