摘自张鑫旭老师的博客——

display:none和visibility:hidden都能使元素隐藏，但是有明显区别，主要有以下三点：

  1. 空间占据
  2. 重排与重绘
  3. 株连性

1、空间占据。

使用display隐藏后，元素不占用任何空间，而visibility占据的空间仍在。

2、重排与重绘

reflow和repaint。由于display隐藏后占据的空间不存在了，所以导致页面的重排与重绘；而visibility占据空间仍在，不引起重排重绘，所以前者会对性能产生影响。

3、株连性

如果父元素应用了display：none，那么子元素无论如何都没有办法显示出来，所以其具有明显的“株连性”；visibility在父元素hidden后，如果子元素应用了visible，那么子元素仍然会显示出来。

css-display:none和visibility：hidden的不同的更多相关文章

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

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

  2. [HTML/CSS]display:none和visibility:hidden的区别

    写在前面 在群里有朋友问这样一个问题,display:none的标签,影响了布局.这就引出了本篇这样的问题,印象中display:none的块元素是不占位置的. 一个例子 <!DOCTYPE h ...

  3. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

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

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

  5. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  6. css元素隐藏（display:none和visibility:hidden）

    在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css  display:none 当使用该样式的时候,HTML元素的宽高等 ...

  7. CSS魔法堂：display:none与visibility:hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

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

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

  9. [转]CSS Display(显示) 与 Visibility（可见性）

    CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...

  10. CSS Display(显示) 与 Visibility（可见性）

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...

随机推荐

  1. iOS之触摸及手势

    触摸事件 iOS中的事件: 在用户使用app过程中,会产生各种各样的事件.iOS中的事件可以分为3大类型:    view的触摸事件处理: 响应者对象: 在iOS中不是任何对象都能处理事件,只有继承了 ...

  2. 进新公司用cornerstone-checkout后遇到的奇葩bug，及解决方法

    从cornerstone中checkout下新的工程,运行报错. 1.开始错误原因是找不到相对应的某个.m文件的路径 解决方案:将缺少的.m文件重新从项目文件夹中导入 2.后来显示 造成的原因是在下面 ...

  3. C语言基于GTK+Libvlc实现的简易视频播放器

    小编心语:现下,各种视频播放软件层出不穷,竞争也越演越烈,不知道大家有木有这个想法,小编有时在想能不能做一款属于自己的视频播放器呢~小编特意去实验楼,整理出了这篇关于如何实现简易视频播放器的博文.简易 ...

  4. IndexOf、IndexOfAny 、Remove

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. RHEL 5.7 Yum配置本地源[Errno 2] No such file or directory

    在Red Hat Enterprise Linux Server release 5.7 上配置YUM本地源时,遇到了"Errno 5] OSError: [Errno 2] No such ...

  6. web应用中使用JavaMail发送邮件 。。转载

    现在很多的网站都提供有用户注册功能, 通常我们注册成功之后就会收到一封来自注册网站的邮件.邮件里面的内容可能包含了我们的注册的用户名和密码以及一个激活账户的超链接等信息.今天我们也来实现一个这样的功能 ...

  7. Apache配置

    redhat6.4企业版用的centos的yum源. 下面进行apache的安装与配置. 1.yum在线安装Apache 一般不采用yum在线安装因为如果apache坏掉了,yum安装过程中会有依赖的 ...

  8. SSH----小小项目的小小总结

    嘛,之前学了一下SSH框架,跟人合作写了个小东西参加比赛,(当然我是队长),真的感慨良多~,现在用这篇博客记录下来吧 1.责任心/责任感 首先要说的一点,要有责任心,当你与别人组成一个团队的时候,虽然 ...

  9. Spring基础[IOC/DI、AOP]

    一.Spring作用:管理项目中各种业务Bean(service类.Dao类.Action类),实例化类,属性赋值 二.Spring IOC(Inversion of Control )控制反转,也被 ...

  10. Java基础知识总结

    写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java语言代码把思路体现出来. 学习新技 ...