display:none和visiblity:hidden区别
相同:
1、两者都能隐藏元素。
不同:
1、display:none 不占页面空间,visiblity:hidden 占据原先页面空间。
这里必须说明的是,元素不占页面空间后,取该元素或其内部元素的宽高值永远是0。如果想隐藏又想取到宽高值,那就得用visiblity:hidden。
2、display:none 的子元素也一定无法显示,visiblity:hidden 的子元素可以设置显示。
display:none元素及其子元素都将隐藏,而visiblity:hidden元素的子元素却可以设置visibility: visible 显示出来。在这一点上,如果页面是比较复杂或者是不受控制的,就要慎重使用visiblity:hidden,因为保不齐哪个元素被设置成可见,影响显示效果。
3、display:none 引起页面重绘和回流, visiblity:hidden 只引起页面重绘。
visiblity:hidden 看起来的性能比display:none好些,在两者都能使用情况下,可先考虑visiblity:hidden。但也不用千方百计用visiblity:hidden,用哪个还是看需求,性能优化只是其中一部分,莫要本末倒置。
display:none和visiblity:hidden区别的更多相关文章
- display:none与visible:hidden区别
if(list.style.display=='none'){ list.style.display='block'; }else{ ...
- display:none和visibility:hidden区别
<!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...
- CSS display:none和visibility:hidden区别
你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...
- CSS样式“display:none”与“visibility:hidden”区别
CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...
- display:none与visible:hidden的区别 slideDown与
display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被 ...
- display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
- display:none与visibility: hidden的区别
display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...
- Readonly和disabled的区别 display:none和visible:hidden的区别
怎样使input中的内容为只读,也就是说不让用户更改里面的内容. <input type="text" name="input1" value=" ...
- 个人收集(转载)CSS中 display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...
随机推荐
- Java学习笔记13---如何理解“子类重写父类方法时,返回值若为类类型,则必须与父类返回值类型相同或为其子类”
子类重新实现父类的方法称重写:重写时可以修改访问权限修饰符和返回值,方法名和参数类型及个数都不可以修改:仅当返回值为类类型时,重写的方法才可以修改返回值类型,且必须是父类方法返回值的子类:要么就不修改 ...
- 如何访问 Service?- 每天5分钟玩转 Docker 容器技术(99)
前面我们已经学习了如何部署 service,也验证了 swarm 的 failover 特性.不过截止到现在,有一个重要问题还没有涉及:如何访问 service?这就是本节要讨论的问题. 为了便于分析 ...
- MapReduce 入门之一步步自实现词频统计功能
原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7687120.html ------------------------------------ ...
- 常用IO按位操作
PORTD |= (1 << op) //位置高PORTD &= ~(1 << op) //位置低PORTD ^= (1 < ...
- JS 函数节流和去抖
1.什么是节流和去抖? 节流.就是拧紧水龙头让水少流一点,但是不是不让水流了.想象一下在现实生活中有时候我们需要接一桶水,接水的同时不想一直站在那等着,可能要离开一会去干一点别的事请,让水差不多流满一 ...
- Django 2.0 新特性 抢先看!
一.Python兼容性 Django 2.0支持Python3.4.3.5和3.6.Django官方强烈推荐每个系列的最新版本. 最重要的是Django 2.0不再支持Python2! Django ...
- TCP/IP协议栈 --- IP路由
IP路由:当一个IP包在主机发送出去或者在网络当中时,是怎么选择路径到达目的主机的呢? 一般情况下, 如果说源主机和目的主机在同一个网络中的话,那个数据报可以直接到达目的主机而不经过路由器,下面可以试 ...
- 导入Excel 文件(图片和文字)NPOI+BootStrap fileinput 插件 的结合使用
1.页面代码: <!DOCTYPE html><html><head> <meta name="viewport" content=&qu ...
- 算法(Python)
算法就是为了解决某一个问题而采取的具体有效的操作步骤 算法的复杂度,表示代码的运行效率,用一个大写的O加括号来表示,比如O(1),O(n) 认为算法的复杂度是渐进的,即对于一个大小为n的输入,如果他的 ...
- cookie解决跨域问题
v一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入 ...