用 CSS 隐藏页面元素的 5 种方法

用 CSS 隐藏页面元素的 5 种方法


Opacity：
    opacity 属性的意思是设置一个元素的透明度。这意味着将 opacity 设为 0 只能从视觉上隐藏元素，而元素本身依然占据它自己的位置并对网页的布局起作用，同时它将响应用户交互。此外，元素在读屏软件中不会被隐藏。


Visibility：
    将visibility的值设为 hidden将隐藏我们的元素。如同 opacity 属性，被隐藏的元素依然会对我们的网页布局起作用。与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏；
    如果一个元素的 visibility 被设置为 hidden，同时想要显示它的某个子孙元素，只要将那个元素的 visibility 显式设置为 visible 即可。

Display：

    display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。被隐藏的元素对我们的网页布局不起作用，也不会响应任何用户交互。此外，读屏软件也不会读到元素的内容，这种方式产生的效果就像元素完全不存在；

    任何这个元素的子孙元素也会被同时隐藏；

    为这个属性添加过渡动画是无效的，它的任何不同状态值之间的切换总是会立即生效；

    通过 DOM 依然可以访问到这个元素，因此你可以通过 DOM 来操作它，就像操作其他的元素。


Position：
    假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互——译者注）。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下面是采用这种办法的 CSS：

hide {

   position: absolute;
   top: -9999px;
   left: -9999px;
}
这种方法的主要原理是通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见。采用这个技术的一个好处（或者潜在的缺点）是用它隐藏的元素的内容可以被读屏软件读取。


Clip-path：
    隐藏元素的另一种方法是通过剪裁它们来实现。在以前，这可以通过 clip 属性来实现，但是这个属性被废弃了，换成一个更好的属性叫做 clip-path。Nitish Kumar 最近在 SitePoint 发表了“介绍 clicp-path 属性”这篇文章，通过阅读它可以了解这个属性的更多高级用法。记住，clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要更低，使用 clip-path 属性来隐藏元素的代码看起来如下：


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