display:none 与 visibility:hidden 的区别

除了是否占据空间外，还有其他区别要注意

1、空间占据

display:none 隐藏后不占据额外空间（元素从文档流中移除，但元素在DOM中仍然存在）

visibility:hidden  占据着空间

opacity:0  占据着空间

    

2、子元素继承

display:none 子元素具有继承性，可以通过设置子元素display：block 显示出来

visibility:hidden 子元素具有继承性，可以通过设置子元素visibility:visible 使子元素显示出来

opacity: 0 会被子元素继承，但是不能通过设置子元素opacity:1使其重新显示

3、事件绑定

display:none 的元素都已经不在页面存在了，因此肯定也无法触发它上面绑定的事件；

visibility:hidden 元素上绑定的事件 无法触发；

opacity: 0 元素上面绑定的事件是可以触发的。

4、过渡动画

transition对于display 是无效的。因为display:none使元素删除，页面文档流中将不会存在该元素，transition属性无法对一个从无到有的元素进行过渡显示。

transition对于visibility 是有效的；

transition对于opacity 是有效

.img{
   -webkit-transition:all 0.5s linear;
   -moz-transition:all 0.5s linear;
   -ms-transition:all 0.5s linear;
   -o-transition:all 0.5s linear;
   transition:all 0.5s linear;
}
.img{
    position:absolute; 
    margin-top:20px; 
    visibility:hidden;    // opacity:0;
}
.hover:hover .img{ 
    visibility:visible;   //opacity:1;
}

<div class="hover">
    <div class="img></div>
    <a href="#">经过我显示图片</a>
</div>

5、是否会引起重排和重绘

display:none会引起回流(重排)和重绘

visibility:hidden会引起重绘

opacity:0  会引起重绘

css控制元素不可见的方法 

display: none; /* 不占据空间，无法点击 */ 
visibility: hidden; /* 占据空间，无法点击 */ 
opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击   IE8 以及更早的版本*/ 

position: absolute; top: -999em; /* 不占据空间，无法点击 */ 
position: relative; top: -999em; /* 占据空间，无法点击 */ 
position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ 
height: 0; overflow: hidden; /* 不占据空间，无法点击 */ 
position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ 
zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ }
position: absolute; zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* 不占据空间，无法点击 */ }

参考：区别