让元素隐藏的方法

在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。

1、display

{
   display: none; /* 不占据空间，无法点击 */ 
}

这个是彻底的隐藏了元素，不占据空间，也就不影响布局，当然也无法响应事件。

2、visibility

{ 
  visibility: hidden; /* 占据空间，无法点击 */ 
}

被隐藏的元素依然会对我们的网页布局起作用。但它不会响应任何用户交互。

3、overflow

{ 
  height: 0; overflow: hidden; /* 不占据空间，无法点击 */ 
}

4、opacity

{ 
  opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ 
}

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

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

5、position+opacity

{ 
  position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ 
}

6、position

{ 
  position: absolute; top: -999em; /* 不占据空间，无法点击 */ 
}

{ 
  position: relative; top: -999em; /* 占据空间，无法点击 */ 
}

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

7、clip/clip-path

　　clip 属性剪裁绝对定位元素。

　　当一幅图像的尺寸大于包含它的元素时会发生什么呢？"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。

　　这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

　　四个值分别对应top,right,bottom,left，以第四象限为标准的。即使可见区域的四个方向距离最边的长。

<html>
<head>
<style type="text/css">
div{100px;height:100px;border:1px solid black;}
p{
background:red;position:absolute;clip:rect(0,0,0,0)  
}
</style>
</head>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>

　　在以前，这可以通过 clip 属性来实现，但是这个属性被废弃了(现在浏览器依然支持)，换成一个更好的属性叫做 clip-path。clip-path属性实在是用处大大滴有，可以很容易的实现一些复杂的图形

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

8、z-index

.hide{
    position:absolute;
    z-index:-1000;/* 不占据空间，无法点击 */
}

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

9、transform

.hide{
    transform: scale(0,0)/* 占据空间，无法点击 */
}