前端小知识(一)css隐藏元素

1.CSS隐藏元素的几种方法    

• Opacity:元素本身依然占据它原本位置并对网页的布局起作用。它也将响应用户交互;.hide{ opacity:0;}
• Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

  .hide{visibility:hidden;}

• Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

  .hide{ display:none;}

• Position:不会影响布局，能让元素保持可以操作;

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

• Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

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