CSS 隐藏元素的八种方法

前言

总括： 本文详细讲述了在网页中用CSS隐藏元素的七种方法。

• 原文博客地址：从隐藏元素谈起

• 知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书）

• 博主博客地址：Damonare的我的博客

念念不忘,必有回响;有一口气,点一盏灯。

正文

提及隐藏元素我想每个前端er都能提及几种，但能说全的我想就不是不少了。博主总结了几种隐藏元素的方法，总结以下：

overflow:hidden
opacity:0；
visibility:hidden
display:none
position:absolute
clip(clip-path):rect()/inset()/polygon()
z-index:-1000
transform:scaleY(0)

咱们为何会须要这么多隐藏元素的方法呢，并且他们看起来实现的都是一样的效果。其实每一种方法实际上都有一些细微的不一样，这些不一样决定了在一些特定场合下使用哪种方法。咱们下面细细探讨下这些细微之处.

1. overflow

.hide{
     overflow:hidden; /* 占据空间，没法点击 */
}复制代码

overflow的hidden用来隐藏元素溢出部分，占据空间，没法响应点击事件。

2.opacity

.hide{
    opacity:0;/* 占据空间，能够点击 */
}
.hide_2{
    -webkit-filter:opacity(0);
    filter:opacity(0);/* 占据空间，能够点击 */
}复制代码

过滤元素filter也可以使用opacity值设置透明度，不过filter如今的兼容性很差，只支持webkit内核，这里顺带一提。

opacity是用来设置元素透明度的，但当设置成0的时候也就至关于隐藏元素了。所以，元素依然存在原来的位置，占据空间也可响应事件。若是你打算使用 opacity 属性在读屏软件中隐藏元素，很不幸，你并不能如愿。元素和它全部的内容会被读屏软件阅读，就像网页上的其余元素那样。换句话说，元素的行为就和它们不透明时一致。

3.visibility

.hide{
    visibility:hidden; /* 占据空间，没法点击 */
}复制代码

如同 opacity 属性，被隐藏的元素依然会对咱们的网页布局起做用。与 opacity 惟一不一样的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏

4.display

.hide{
    display:none;/* 不占据空间，没法点击 */
}复制代码

经典的display隐藏元素,这个是完全的隐藏了元素，不占据空间，也就不影响布局，固然也没法响应事件。

5.position

.hide{
    position：absolute;
    left:-99999px;
    top:-90999px;/* 不占据空间，没法点击 */
}
.hide-2{
    position：relative;
    left:-99999px;
    top:-90999px;/* 占据空间，没法点击 */
}复制代码

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

6.clip/clip-path

.hide{
    position:absolute;/*fixed*/
    clip:rect(top,right,bottom,left);/* 占据空间，没法点击 */
}
.hide_2 {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}复制代码

隐藏元素的另外一种方法是经过剪裁它们来实现。在之前，这能够经过 clip 属性来实现，可是这个属性被废弃了(如今浏览器依然支持)，换成一个更好的属性叫作 clip-path。clip-path属性实在是用处大大滴有，能够很容易的实现一些复杂的图形大漠老师分享的一个连接，该连接里的图形大多都是用clip-path的polygon值来实现的。但惋惜的是依旧只能在chrome40+浏览器里使用.

7.z-index

.hide{
    position:absolute;
    z-index:-1000;/* 不占据空间，没法点击 */
}复制代码

经过设置z-index值使其它元素遮盖该元素也算是一种隐藏了。

8. transform

.hide{
    transform: scale(0,0)/* 占据空间，没法点击 */
}复制代码

后记

在这篇教程里，咱们看了 7 种不一样的经过 CSS 隐藏元素的方法。每一种方法都与其余几种有一点区别。知道你想要实现什么有助于你决定采用哪个属性，随着时间推移，你就能根据实际需求本能地选择最佳方式了。若是你对于隐藏元素的这些方法还有任何问题，请在评论中留言。