相同：

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区别的更多相关文章

  1. display:none与visible:hidden区别

    if(list.style.display=='none'){                 list.style.display='block';             }else{       ...

  2. display:none和visibility:hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

  3. CSS display:none和visibility:hidden区别

    你知道CSSdisplay:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度.高度等各种属性值都将&qu ...

  4. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  5. display:none与visible:hidden的区别 slideDown与

    display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被 ...

  6. display:none与visible:hidden的区别

    display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...

  7. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  8. Readonly和disabled的区别 display:none和visible:hidden的区别

    怎样使input中的内容为只读,也就是说不让用户更改里面的内容. <input type="text" name="input1" value=" ...

  9. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

随机推荐

  1. Unity与iOS原生代码之间的相互调用

    1.Unity调用iOS: 1.1.在Unity C#中: [ DllImport( "__Internal" )] private static extern int _show ...

  2. vuejs(2.0)基础笔记

    基本结构 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#wrap', data ...

  3. python_day05(去爬登录的豆瓣)

    # 爬豆瓣需要用cookie# 需要注意隐藏的参数,即input 里面的默认的一些参数# 需要自己注册一个账户密码import urllib.requestimport http.cookiejarf ...

  4. WEB漏洞攻击之验证码绕过浅析

    最近安全部门对WEB系统进行了一次漏洞整改,发现了某个系统存在验证码绕过风险. 根据安全部门提供的信息,该漏洞构造场景是通过一层中间代理(Burpsuite Proxy)拦截客户端与服务端的请求,通过 ...

  5. Java关键字(一) 修饰符private、protected、public和default的作用域

    我们经常用着四种修饰符去修饰变量.方法和类,但是这四种的作用域都一样吗? 其中private和public可能是最多人知道的,但是protected和default可能就不知道其具体的作用域是哪些范围 ...

  6. 自己动手编写IOC框架（一）

    博客创建了2年多了,一直没敢写点东西,怕技术不够误导了别人.2年多后的今天我已经很有信心能够为需要帮助的人做点微薄的贡献了.这是我第一次写博客,先自我介绍一下.本人网名泪滴,一个非常伤心的名字,生活中 ...

  7. PHP进程锁

    <?php /** * CacheLock 进程锁,主要用来进行cache失效时的单进程cache获取,防止过多的SQL请求穿透到数据库 * 用于解决PHP在并发时候的锁控制,通过文件/eacc ...

  8. Zepto中的Swipe事件失效

    需要阻止浏览器默认滑动的事件 document.addEventListener('touchmove', function (event) { event.preventDefault(); }, ...

  9. SpringBoot集成Redis实现缓存处理(Spring AOP实现)

    第一章 需求分析 计划在Team的开源项目里加入Redis实现缓存处理,因为业务功能已经实现了一部分,通过写Redis工具类,然后引用,改动量较大,而且不可以实现解耦合,所以想到了Spring框架的A ...

  10. javaweb学习总结(六)——Servlet开发(二)（转）

    转载自 http://www.cnblogs.com/xdp-gacl/p/3763559.html 一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文 ...