display:none与visibility: hidden的区别

编程之家收集整理的这篇文章主要介绍了display:none与visibility: hidden的区别编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

1.visibility: hidden/visible与dispaly:none 有些人简单的认为display: none;和visibility: hidden; 这两个属性的区别在于前者隐藏后

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>

(~C%HC(_8%I5950SIN4U1BT.png

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;
}

01.gif

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>

02.gif

4.是否有回流

display:none是彻底消失,
不在文档流中占位,
浏览器也不会解析该元素;
display:none切换时会产生回流。

visibility:hidden是视觉上消失了,
在文档流中占位,浏览器会解析该元素;
不会产生回流

总结

以上是编程之家为你收集整理的display:none与visibility: hidden的区别全部内容,希望文章能够帮你解决display:none与visibility: hidden的区别所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

猜你在找的CSS相关文章

有时,你需要修改第三方组件的CSS; 然而你直接修改是不可以的, 但是我们非要去修改第三方的组件; 此时可以使用==》深层选择器 &gt;&gt;&gt; /deep/ ::v-deep 可以帮助你。
CSS使用伪类给表单添加星号 &lt;style type=&quot;text/css&quot;&gt; .form-item label::before { content: &#39;*&#3
1.display的常见现象 我们很多人都知道,display可以让元素实现隐藏或者显示。 或者让行级元素变成块级元素。 对它的认识也是比较准确的。 如果一个元素使用了display:none; 那么
1.visibility: hidden/visible与dispaly:none 有些人简单的认为display: none;和visibility: hidden; 这两个属性的区别在于前者隐藏后
在hover时,i元素变成了块级元素; 导致这两个元素各自占了一行; 最终导致样式错乱; &lt;div class=&quot;demo&quot;&gt; &lt;!-- 添加图标 和 编辑图标
``` 保存 //按钮的字体色是白色.save-btn /deep/ span{ color: #fff;}.save-btn:hover{ background: #409EFF;}.save-bt
今天大家在浏览B站,腾讯视频,等网站时,有没有发现一个现象,网站变成灰色的了。 是不是跟平常不一样了呢,这是因为今天(2020.4.4)是全国哀悼日, 所以网站这些就变成灰色的呢。 我去看了一下腾讯的
重绘:当元素的一部分属性发生改变, 如背景、颜色等不会引起布局变化, 只需要浏览器根据元素的新属性重新绘制, 使元素呈现新的外观叫做重绘。 重排(回流):当render树中的一部分或者全部因为大小边距
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注