相同：

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. 4）C语言指针（C自考学习）

    指针和指针变量 指针就是地址,地址是一种数据类型.指针变量也是变量,但只能存放地址类型的数据,可以称为"地址型"变量. 1)内存单元和地址 一个程序运行时,程序本身和程序中用到的数 ...

  2. vuejs(2.0)基础笔记

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

  3. windows下tensorflow的安装

    一.直接python安装 1.CPU版本: pip3 install --upgrade tensorflow 2.GPU版本:pip3 install --upgrade tensorflow-gp ...

  4. 面向对象编程 —— java实现函数求导

    文章目录 ★引子 ★求导 ★最初的想法 ★初步的想法 ★后来的想法 ★最后的想法 ★编程范式 ★结尾 首先声明一点,本文主要介绍的是面向对象(OO)的思想,顺便谈下函数式编程,而不是教你如何准确地.科 ...

  5. Python——Scrapy初学

    Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架.可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中.Scrapy最初是为了页面抓取(更确切来说, 网络抓取)所设计的,也 ...

  6. 如何滚动更新 Service？- 每天5分钟玩转 Docker 容器技术（102）

    在前面的实验中,我们部署了多个副本的服务,本节将讨论如何滚动更新每一个副本. 滚动更新降低了应用更新的风险,如果某个副本更新失败,整个更新将暂停,其他副本则可以继续提供服务.同时,在更新的过程中,总是 ...

  7. 升级PyCham到2017.3后import sys模块报错的问题

    今天PyCharm提示升级后选择了更新,根据提示更新成功(2017.3)后发现总是报无法找到sys模块的错误,截图如下: 其实有一条红线留在那里也不影响运行和使用,但总看着不爽. 经过一番研究,由于我 ...

  8. 【LintCode·入门】斐波那契数列

    斐波那契数列 描述 查找斐波纳契数列中第 N 个数. 所谓的斐波纳契数列是指: 前2个数是 0 和 1 . 第 i 个数是第 i-1 个数和第i-2 个数的和. 斐波纳契数列的前10个数字是: 0, ...

  9. PHP能引起安全的函数

    php中需要禁用以下函数来提高安全性 打开php.ini  找到 disable_functions .然后禁用以下函数 disable_functions = pcntl_alarm, pcntl_ ...

  10. 数据结构与算法（C/C++版）【栈与队列】

    第三章<栈与队列> (一)栈简介  栈(Stack):只允许在一端进行插入或删除操作的线性表.首先栈是一种线性表,但是限定这种线性表只能在某一端进行插入和删除操作栈顶(top):线性表允许 ...