使用display：none和visibility：hidden隐藏的区别
2024-09-21 19:35:30
今天做毕设时遇到了一个小问题，我做了一个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页中的轮播图就可以获取宽度做自适应了。
最新文章
- JavaScript 函数表达式
- maven install Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.1.1:war (default-war) on project web_nanchang
- HTML5+JS 《五子飞》游戏实现（六）鼠标响应与多重选择
- Android IOS WebRTC 音视频开发总结（五六）-- 如何测试网络性能？
- [原] blade中C++ singleton的实现
- Spark的优点
- HTTP响应报文与工作原理详解
- poj 2094 多项式求和。
- Delphi事件的广播 good
- NodeJS NPM 镜像使用方法
- Hdoj 1421.搬寝室 题解
- hdu 3397 Sequence operation (线段树 区间合并 多重标记）
- CentOS6.5下卸载自带的MySQL数据库安装MySQL5.6
- linux 用户配制文件 用户增加及删除 以及用户属于的更改
- hdu 5089 使做对k-1题最大概率的选题方案
- Microsoft Dynamics CRM 2013 相关安装包下载
- 男女通用的减肥计划 10分钟家庭hiit训练
- JavaScript也能求爱哦
- PHP设置脚本最大执行时间的三种方法
- 160708、JQuery解析XML数据的demo