使用display：none和visibility：hidden隐藏的区别

今天做毕设时遇到了一个小问题，我做了一个tab导航栏，点击一个tab页其它tab页隐藏，这时候第一想法是使用display：none来控制显示隐藏，写了之后发现使用display会有一个问题，就是第二个tab页的轮播图是在页面渲染时获取第二个tab页中某个元素的宽度来做自适应效果，因为已经隐藏，宽度为0，所以导致轮播图的高度也为0，后来把display:none改为visibility：hidden就正常显示和播放了。

display:none和visibility:hidden的区别是：

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

所以我使用visibility:hidden，在页面渲染时第二个tab页中的轮播图就可以获取宽度做自适应了。

使用display：none和visibility：hidden隐藏的区别相关推荐

display:none和visibility:hidden两者的区别
使用css让元素不可见的方法有很多种,裁剪.定位到屏幕外边.透明度变换等都是可以的.但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden.很多公司的面 ...
display:none和visibility:hidden的qubie
隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为" ...
[css] 说说display:none和visibility:hidden的区别
[css] 说说display:none和visibility:hidden的区别 display:none dom对象不渲染. visibility:hidden 隐藏但是dom对象渲染. 个人简介 ...
display:none和visibility:hidden的区别
在使用CSS隐藏一些元素时,我们经常用到 display:none 和 visibility:hidden.两者差别如下: 1. 是否占据空间 display:none,该元素不占据任何空间,在文档渲 ...
_blank 和 _self的区别以及display:none和visibility:hidden的区别
_blank 和 _self的区别 target=_blank会在当前窗口之外再打开一个新窗口来显示新的页面 target=_self在当前窗口打开新页面 display:none和visibili ...
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
前端CSS元素隐藏的知识(display:none:visibility:hidden:overflow:hidden:opacity: 0) 欢迎来到CSS隐藏属性界面你好! 可以仔细阅读这篇文章 ...
display: none;、visibility: hidden、opacity=0区别总结
display: none; 1.浏览器不会生成属性为display: none;的元素. 2.display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排. 3.di ...
display:none;与visibility:hidden;的区别
display:none;不会占用任何空间 visibility:hidden;会占用隐藏前的空间大小转载于:https://www.cnblogs.com/yaser/p/4414825.html
display:none和visibility:hidden和透明度的区别
**当想实现一个区域或者内容的消失(隐藏)**,我们有多种代码可以实现.但是根据要求和用户体验,应该选择最合适的方法实现.代码中最常用的代码包括:display:none; visibility:hi ...

使用display：none和visibility：hidden隐藏的区别

使用display：none和visibility：hidden隐藏的区别相关推荐

最新文章

热门文章