css实现显示隐藏是在写前端时经常遇见的问题，我根据自己的经验以及网上的方法，一共总结了5种。下面我分析一下它们各自的特点。
1. dispalay:none
这是最简单也是最容易想到的方法。
.hide {
display:none;
}
dispaly:none的特点就是会使其子代元素全部隐藏起来，被隐藏的元素不占任何的空间，就连盒模型也也不生成。根据文档流的走向，右边的元素会往左边排，下面的素会往上面排，这点在开发的时候需要注意，不要将页面的布局给破坏了。
但是打开控制台选中该元素你会发现，其实它的DOM还是存在的，所以在js中还是可以通过DOM节点来访问被隐藏的元素。
2. visibility:hidden
这个方法也是将元素隐藏起来，跟display的区别是， visibility:hidden将元素隐藏了，但是元素所占的空间还是保留的。也就是说其右边的元素不会往左排，下面的元素也不会网上排。
注意一点：若在父级元素设置: visibility:hidden,而在子元素中设置： visibility:visible,则该子元素以及子元素的子孙元素都是可见的。
这个方法的DOM元素也是存在的，可以通过DOM节点来访问被隐藏的元素。
如下例：
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<script src=”http://cdn.bootcss.com/angular.js/1.6.2/angular.min.js”></script>
<style>
div {
height: 200px;
200px;
}
.div-green {
background-color: green;
visibility: hidden;
}
.div-red {
background-color: red;
}
.visible {
visibility: visible;
}
</style>
</head>
<body>
<h1>normal div</h1>
<div class=”div-green”>
<div >
<a>test visibility</a>
</div>
<div>
<a>test visibility2</a>
</div>
</div>
<div class=”div-red”>div2</div>
</body>
</html>
将绿色的div设置了visibility:hidden，其输出结果是，绿色的div被隐藏起来了：
再将绿色div的子元素加一个visible类：
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<script src=”http://cdn.bootcss.com/angular.js/1.6.2/angular.min.js”></script>
<style>
div {
height: 200px;
200px;
}
.div-green {
background-color: green;
visibility: hidden;
}
.div-red {
background-color: red;
}
.visible {
visibility: visible;
}
</style>
</head>
<body>
<h1>normal div</h1>
<div class=”div-green”>
<div class=”visible”>
<a>test visibility</a>
</div>
<div>
<a>test visibility2</a>
</div>
</div>
<div class=”div-red”>div2</div>
</body>
</html>
输出结果如下：
从上图可以看出子元素中设置了visibility:visible 子元素变成可见了。
3. opacity
opacity是设置元素的透明度，取值 0~1,0就是全透明，1就是不透明，opacity:0只是在视觉上让人以为元素以及其子代元素被隐藏了，其实该元素还是占据空间的。通过js也是可以访问该DOM节点。
4. position
不想看到一个元素？很简单啊，把它移到一个自己看不见的地方就行了，position设置隐藏就是用的这种方法，将元素的position设置为一个absoulute，让后将其位置超出屏幕的位置，不就是看不见了吗。
eg:
.hide {
position: absolute;
top: –9999px;
left: –9999px;
}
5.clip-path
这种方法不是很常用，可以了解一下:
clip-path还没被IE或者Edge完全支持，如果在clip-path中使用外部的svg文件，浏览器的支持度会更低，使用clip-path方法的代码如下：
.hide {
clip-path: polygon0px 0px,0px 0px,0px 0px,0px 0px);
}