1.visibility: hidden/visible与dispaly：none
有些人简单的认为display: none;和visibility: hidden;
这两个属性的区别在于前者隐藏后不占据文档空间。
后者隐藏后会占据文档空间。
其实visibility: hidden并不是你想的这个简单。
visibility是一个你低估了的属性，
我们都知道visibility: hidden;是具继承性的，
如果父级元素设置了visibility: hidden;
那么子集元素也会看不见。
但是如果子集元素设置了visibility: visible;
则该子元素又会显示出来
这个和display:none有着本质的区别
<ul> <li>你看不见我1</li> <li class="second-li">你看不见我2</li> <li>你看不见我3</li> <li>你看不见我4</li> </ul> <style type="text/css"> ul{ visibility: hidden; background: pink; } .second-li{ visibility: visible; } </style>
我们发现虽然最外层的ul虽然被visibility: hidden
但是其子元素设置了 visibility: visible
那么该子元素就会被显示出来
2.display和visibility对计数器的影响
display: none; 对计数器是有影响的；
如果某一个元素隐藏则该元素不参与计数器的计算
visibility: hidden;对计数器是没有影响的
如果某一个元素隐藏则该元素仍然参与计数器的计算
<ol> <li>不影响计数器1</li> <li class="second-li">不影响计数器2</li> <li>不影响计数器3</li> <li>不影响计数器4</li> </ol> <ol> <li>影响计数器1</li> <li class="li-er">影响计数器2</li> <li>影响计数器3</li> <li>影响计数器4</li> </ol> <style type="text/css"> ol{ background-color: mistyrose; margin-top: 10px; } .second-li{ visibility: hidden; } .li-er{ display: none; } </style>
3.display与visibility参与的动画效果不同
display:none参与的动画效果是不会产生过渡动画的,
即使你设置了过渡的时间。
visibility: hidden参与的动画会产生过渡效果;
因为css3对transition支持的属性中就visibility；
但是很遗憾的是没有对display进行支持。
3.1使用display: none对动画产生的过度效果
下面的代码因为使用了display: none;
虽然设置了动画的过度效果
但是却立刻显示出来了
<div class="box"> 显示出来显示出来 <div class="son"> 我没有动画效果 </div> </div> .son{ opacity: 0; transition: opacity 5s; display: none; } .box:hover .son{ display: block; opacity: 1; }
3.2 使用visibility: hidde对动画产生的过度效果;
<div class="box"> 显示出来显示出来 <div class="son"> 我没有动画效果 </div> </div> <style type="text/css"> .son{ opacity: 0; transition: opacity 5s; visibility: hidden; } .box:hover .son{ visibility: visible; opacity: 1; } </style>
4.是否有回流
display:none是彻底消失，
不在文档流中占位，
浏览器也不会解析该元素；
display:none切换时会产生回流。
visibility:hidden是视觉上消失了，
在文档流中占位，浏览器会解析该元素；
不会产生回流
