display:none与visibility: hidden的区别

“这是我参与更文挑战的第4天，活动详情查看： 更文挑战”

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是视觉上消失了，
在文档流中占位，浏览器会解析该元素；
不会产生回流