CSS样式隐藏

CSS隐藏属性

{ display: none; }
隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就像它从来不存在。


{ visibility: hidden; }
隐藏对应的元素，但是在文档布局中仍保留原来的空间。不会响应任何用户交互。且元素在读屏软件中也会被隐藏;


{ display: none; }
opacity: 设置宽高为0，设置透明度为0，设置z-index位置在-1000
元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

<!--Position:不会影响布局，能让元素保持可以操作;-->
<!--Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。-->
<!--如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;-->