css-display:none和visibility:hidden的不同
摘自张鑫旭老师的博客——
display:none和visibility:hidden都能使元素隐藏,但是有明显区别,主要有以下三点:
- 空间占据
- 重排与重绘
- 株连性
1、空间占据。
使用display隐藏后,元素不占用任何空间,而visibility占据的空间仍在。
2、重排与重绘
reflow和repaint。由于display隐藏后占据的空间不存在了,所以导致页面的重排与重绘;而visibility占据空间仍在,不引起重排重绘,所以前者会对性能产生影响。
3、株连性
如果父元素应用了display:none,那么子元素无论如何都没有办法显示出来,所以其具有明显的“株连性”;visibility在父元素hidden后,如果子元素应用了visible,那么子元素仍然会显示出来。
css-display:none和visibility:hidden的不同的更多相关文章
- CSS display:none和visibility:hidden区别
你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...
- [HTML/CSS]display:none和visibility:hidden的区别
写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...
- display:none;与visibility:hidden;的区别
visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...
- CSS样式“display:none”与“visibility:hidden”区别
CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...
- CSS样式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的恩怨情仇
前言 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...
- 个人收集(转载)CSS中 display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...
- [转]CSS Display(显示) 与 Visibility(可见性)
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- CSS Display(显示) 与 Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...
随机推荐
- 基于Ruby的watir-webdriver自动化测试方案与实施(五)
接着基于Ruby的watir-webdriver自动化测试方案与实施(四) http://www.cnblogs.com/Javame/p/4164570.html 继续 ... ... 关于特殊控件 ...
- 最新版Android开发工具
最新版Android开发工具 JUN 27TH, 2014 Android Tools ADT Bundle ADT Bundle包含了Eclipse.ADT插件和SDK Tools,是已经集成好的I ...
- ORACLE数据库SQL语句的执行过程
SQL语句在数据库中处理过程是怎样的呢?执行顺序呢?在回答这个问题前,我们先来回顾一下:在ORACLE数据库系统架构下,SQL语句由用户进程产生,然后传到相对应的服务端进程,之后由服务器进程执行该SQ ...
- 还来一篇说下json_value 以及 json_query 的应用 (3)
上一篇说了一下openjson 的一些使用方法,这次再说一下在2016里面的查询取值,当然就是 json_query 和 json_value 这2兄弟了 首先 ) = '{"a" ...
- SQL Server自动化运维系列——关于数据收集(多服务器数据收集和性能监控)
需求描述 在生产环境中,很多情况下需要采集数据,用以定位问题或者形成基线. 关于SQL Server中的数据采集有着很多种的解决思路,可以采用Trace.Profile.SQLdiag.扩展事件等诸多 ...
- SQL Server 2008 R2——使用数字辅助表(master..spt_values)实现用计数字段对记录进行重复显示
=================================版权声明================================= 版权声明:原创文章 谢绝转载 请通过右侧公告中的“联系邮 ...
- Linux From Scratch(从零开始构建Linux系统,简称LFS)- Version 7.7(二)
七. 构建临时系统 1. 通用编译指南 a. 确认是否正确设置了 LFS 环境变量 echo $LFS b. 假定你已经正确地设置了宿主系统的符号链接: 1)shell 使用的是 bash. 2)sh ...
- Windows Server 2012 虚拟化实战:存储(一)
在计算机世界我们随处可以见的一种方法,那就是抽象.1946年冯诺依曼提出了计算机的基本结构包含:计算器,存储器和I/O设备.这可能是对计算机这一新生事物最重要的一次抽象,它直接影响了今后几十年计算机软 ...
- Linux 如何实现 VLAN - 每天5分钟玩转 OpenStack(12)
LAN 表示 Local Area Network,本地局域网,通常使用 Hub 和 Switch 来连接 LAN 中的计算机.一般来说,两台计算机连入同一个 Hub 或者 Switch 时,它们就在 ...
- mysql 主从复制配置
环境:已经在centos下安装好mysql,安装参考:http://www.cnblogs.com/bookwed/p/5896619.html,安装好主数据库后,可以克隆一份,注意修改ip等. 19 ...