相同：

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. SpringMVC 视图解析器

    SpringMVC 视图解析器 还记得SpringMVC 快速入门中,dispatcher-servlet.xml 配置的视图解析器么.它是SpringMVC 的核心知识点.本章节比较简单,明白视图解 ...

  2. webpack中tree-shaking技术介绍

    之前介绍过webpack3的新特性,里面提到webpack2支持了ES6的import和export,不需要将ES6的模块先转成CommonJS模块,然后再进行打包处理.正基于此,webpack2引入 ...

  3. 逻辑回归，附tensorflow实现

    本文旨在通过二元分类问题.多元分类问题介绍逻辑回归算法,并实现一个简单的数字分类程序 在生活中,我们经常会碰到这样的问题: 根据苹果表皮颜色判断是青苹果还是红苹果 根据体温判断是否发烧 这种答案只有两 ...

  4. GameObject类及相关API

    GameObject.Find(String name):查找一个名为name的游戏物体,并返回这个游戏物体,找不到返回null.(不到万不得已,不要在Update()中使用,建议在Start()中使 ...

  5. 分水岭 golang入坑系列

    第三式开篇语有些负面, 所以这里就不贴了.有兴趣的自己可以去看看 https://andy-zhangtao.gitbooks.io/golang/content/ .怒发冲冠,意气之作.看完就完了, ...

  6. c++头文件重复引用问题

    引子----之前写C++ 时遇到的坑 之前由于Java实在太好用了,C++的工程代码几乎没怎么碰,真的写起来的时候总会有些小bug,这里就对其中的一个进行个总结 a.h #include " ...

  7. azure备份虚拟机

    备份 azure虚拟机 提前创建了一个linux虚拟机,位置是chinaeast. 如果我们需要备份的虚拟机分别在中国东部和北部,那么需要在两个位置都创建备份库. 创建库 登录经典门户,新建-> ...

  8. PAT 1042. Shuffling Machine (20)

    1042. Shuffling Machine (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Shu ...

  9. mysql 索引类型

    根据类型分为普通索引2种类型,hash 和b-tree   最常用    hash是按一对一索引的.速度 最快但不支持范围 比如where name = 'dd' 最快.但是使用 date >3 ...

  10. 自动化构建工具—gulp的简单配置

    把之前用到的gulp总结整理下,有时候说不出来的,就写出来吧,做个笔记,以后也可以慢慢补充 cnpm i --save-dev gulp 把nodejs模块写到package.json配置文件中,当保 ...