说到元素隐藏，display应该是第一个想到的:none，第二，设置透明度为0，…
我不知道你是否也有同样的想法。据我所知，CSS隐藏元素的方法大约有五种。它们在使用上有自己的“优势”。让我们介绍一下：
No.1 Display
如果设置display，:none确保元素不可见，甚至不生成盒子模型。当然，隐藏的元素并不占用任何空间。不仅如此，一旦将display设置为none，任何直接与用户交互的元素都不可能生效。此外，读取屏幕软件也不会读取元素的内容。这样 效果就像元素完全不存在一样。
.hid{display:none}
这个元素的任何子元素也会同时隐藏。将过渡动画添加到这个属性中是无效的，任何不同状态值之间的切换都会立即生效。
说明：这个元素仍然可以通过DOM访问。因此，您可以通过DOM操作它，就像操作其他元素一样。希望能提醒大家。
No.2 Opacity
opacity 属性是指设置元素的透明度。它不是为了改变元素的边界框（bounding box）设计。这意味着将opacity设置为0，只能在视觉上隐藏元素。元素本身仍然占据自己的位置，并在网页的布局中发挥作用。它还将响应用户交互。
.hid{opacity:0;filter:alpha(opacity=0)}
说明：虽然opacity的隐藏不能完全隐藏，但它在我们处理动画时很常用~~
No.3 Visibility
当我们设置visibility时:hidden之后，我们的元素会被隐藏起来。就像opacity属性一样，隐藏的元素仍然会在我们的网页布局中发挥作用。唯一与opacity不同的是，它不会响应任何用户交互。此外，元素也会隐藏在读屏软件中。只要它的初始状态和结束状态不同，这个属性也可以实现动画效果。这确保了visibility状态切换之间的过渡动画时间平稳
.hid{visibility:hidden}
说明：如果设置了一个元素的visibility hidden，只要将该元素的visibility显式设置为visible，同时想要显示其某个子元素。该方法可用于“假对象去除浮动”，也可实现简单的菜单下拉效果等。之前介绍过菜单下拉效果的应用，可以戳下这个连接:CSS下拉导航菜单的制作方法
说明：IE6虽然不支持IE6，但已经快绝种了，o(∩_∩)o 。
No.4 Position
使用position隐藏元素，无非是在不影响布局的情况下使用绝对定位，将元素移出我们的视觉区域
position:absolute;left:-999em;top:-999em
说明：这个比较简单，就不啰嗦了。
No.5 Clip-path
我最近才知道这种方法。它是通过切割来隐藏元素的。这种方法很少使用。在过去，它可以通过clip属性实现，但这个属性被废弃了。用更好的属性代替它被称为 clip-path。代码如下
.hid{clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px)}
如果你把鼠标停在第一个元素上，它仍然会影响第二个元素，尽管第二个元素已经通过clip-path隐藏了。如果你点击它，它将删除隐藏class的元素，并从这个位置显示我们的元素。隐藏元素中的文字仍然可以通过读屏软件读取，许多WordPresss 该网站使用clip-path或之前的clip来实现专门为读屏软件提供的文本。
虽然我们的元素本身不再显示，但它仍然占据了应该占据的矩形大小，它周围元素的行为就像它可见时一样。记住用户交互，如鼠标悬挂或单击剪切区域 除此之外，也不可能生效。在我们的例子中，剪裁面积为零，这意味着用户不能直接与隐藏的元素交互。此外，该属性可以使用各种过渡动画来实现不同的效果。
说明：clip-path属性在IE或Edge下还没有得到完全支持。如果要在你的clip-path中使用外部SVG文件，浏览器支持度会更低，所以现在还是很常用的，可以了解一下。
总结
以上五种方法在不同情况下有不同的用途。但有一件事要说：上面的隐藏方法，表面是隐藏的，但浏览器仍然会加载渲染。如果你有更多的方法，可以留言。
