1. 在隐藏的方法中，display取none值这种方法一般是不可取的！因为display：none是直接不显示，也就是不渲染此元素，如果它所作用的元素排版在页面较前，先渲染，就容易引起回流(reflow)和重绘(repaint),造成难以预知的后果。
display:none;
特点： 不占据空间，不可点击（对鼠标事件无响应）
株连性：其后代元素一概不渲染
transition无法对其起作用
2.visibility:元素消失，而后面的div却没有占据它原来的位置，说明元素不可见却仍然占据空间。
visibility:hidden;
另外还有一种特殊情况：此时，后面的div占据它原来的位置（元素将脱离文档流，后面的元素就会占据它原本的空间）
visibility:hidden;
position: absolute;// 或fixed; 或float：left/right
特点：占据空间，却不可点击（对鼠标事件无响应）
有继承性，无株连性，后代元素可以设置visibility:visible来显示自己
transition对hidden -> visible无效,对visible -> hidden 有效
3. 设置透明度
opacity:0;
特点：占据空间，可点击（对鼠标事件有响应）
有继承性，无株连性，后代元素可设置opacity:1或者rgba(n,n,n,1)来显示自己
transition对其有效
使用position或float使其脱离文档流后，仍然对鼠标事件响应。
4.overflow:hidden;
<style>
.overflow{
overflow:hidden;
}
.overflow>ul>li{
height:100px;
}
.overflow:hover{
height:200px;
}
</style>
<div class="overflow">
<ul>
<li>导航一</li>
<li>导航二</li>
<li>导航三</li>
</ul>
</div>
<div class="position">position</div>
特点：由于是溢出，顾名思义，隐藏的部分本来就不占据空间。
显示可点击（对鼠标事件响应）
无继承性，无株连性，只对设置的元素起作用。
transition对其有效，可做出炫酷的效果哦
只需要改变元素的height:0px即可起到隐藏的效果