css实现显示隐藏的5种方法

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>