使用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两者的区别
display与元素的隐藏 如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式.隐藏后的元素无法点击,无法使用屏幕阅读器 ...
- CSS样式display:none和visibility:hidden的区别
同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...
- 两种隐藏元素方式【display: none】和【visibility: hidden】的区别
此随笔的灵感来源于上周的一个面试,在谈到隐藏元素的时候,面试官突然问我[display: none]和[visibility: hidden]的区别,我当时一愣,这俩有区别吗,好像有,但是忘记了啊,因 ...
- css元素隐藏(display:none和visibility:hidden)
在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css display:none 当使用该样式的时候,HTML元素的宽高等 ...
- CSS样式“display:none”与“visibility:hidden”区别
CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...
- display:none与visibility: hidden的区别
display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...
- 个人收集(转载)CSS中 display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...
- display:none;与visibility:hidden;的区别
visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...
- display:none和visibility:hidden的区别[]
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...
随机推荐
- JMeter基础:请求参数Parameters 、Body Data的区别
使用Jmeter测试时,很多人不知道请求参数Parameters .Body Data的区别和用途,这里简单介绍下 先了解一个接口的基本概念 在客户机和服务器之间进行请求-响应时,HTTP协议中包括G ...
- 解决git commit 遇到datached HEAD问题
git detached HEAD 你可以认为 HEAD(大写)是”current branch”(当下的分支).当你用git checkout切换分支的时候,HEAD 修订版本重新指向新的分支. 有 ...
- docker微服务部署之:七、Rancher进行微服务扩容和缩容
docker微服务部署之:六.Rancher管理部署微服务 Rancher有两个特色用起来很方便,那就是扩容和缩容. 一.扩容前的准备工作 为了能直观的查看效果,需要修改下demo_article项目 ...
- 【xsy1097】 拼图 构造题
题目大意:请你使用n个图形拼成一个矩形.要求:①这每个图形都由1×1的小正方形组成,而且第i个图形由i个小正方形组成.②除了第1个和第2个图形以外,任意一个图形的所有小正方形,不都在一条直线上. 数据 ...
- 剑指offer五十六之删除链表中重复的结点
一.题目 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...
- Java之集合(十三)WeakHashMap
转载请注明源出处:http://www.cnblogs.com/lighten/p/7423818.html 1.前言 本章介绍一下WeakHashMap,这个类也很重要.要想明白此类的作用,先要明白 ...
- Spark编程环境搭建(基于Intellij IDEA的Ultimate版本)(包含Java和Scala版的WordCount)(博主强烈推荐)
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- 【转】Spark:一个高效的分布式计算系统
原文地址:http://tech.uc.cn/?p=2116 概述 什么是Spark Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用的并行计算框架, ...
- mongodb 错误 SCRAM-SHA-1 authentication failed for --转
log 日志错误信息 2018-10-24T16:14:42.244+0800 I NETWORK [initandlisten] connection accepted from 192.168.1 ...
- docker 私有仓库的创建
1, 下载registry镜像 sudo docker pull registry 2, 启动镜像 docker run -d --name registry -h registry -p 5000: ...