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

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. Linux服务器oraclejdk与openjdk共存并配置JavaEE开发环境

    由于本人学业的需要,需要在linux中搭建JavaEE开发环境,与windows的同学协同开发. JDK 由于fedora默认使用openjdk,移除多多少少会出现点问题,由于很多开源软件默认使用到它 ...

  2. 中断ORACLE数据库关闭进程导致错误案例

    昨晚下班的时候,我准备关闭本机的虚拟机上的ORACLE数据库后准备下班,但是由于我SecureCRT开了多个窗口,结果一不小心,疏忽之下在一个生产服务器上执行了shutdown immediate命令 ...

  3. JAVA Map

    基本特性: 维持健值对的集合接口,健不可以重复,每一个健只能映射到一个值. Map替代了原来的虚拟类Directory. Map提供了三种集合视角,keys(KeySet),values(Values ...

  4. MongoDB学习笔记~为IMongoRepository接口更新指定字段

    回到目录 对于MongoDB来说,它的更新建议是对指定字段来说的,即不是把对象里的所有字段都进行update,而是按需去更新,这在性能上是最优的,这当然也是非常容易理解的,我们今天要实现的就是这种按需 ...

  5. 【mysql】关于悲观锁

    关于mysql中的锁 在并发环境下,有可能会出现脏读(Dirty Read).不可重复读(Unrepeatable Read). 幻读(Phantom Read).更新丢失(Lost update)等 ...

  6. linux 环境下安装mysql5.6

    在网上找了很多博客 看着头晕眼花 各个步骤 最终功夫不负有心人 终于安装好了 特此整理分享一下 1> #yum remove mysql mysql-*    //卸载原先版本的mysql 2& ...

  7. centos 进度条卡死

    CentOS 6.7 系统 在执行完删除更新包的全部操作之后, yum remove -y Deployment_Guide-en-US finger cups-libs cups ypbind &a ...

  8. XML 序列化与反序列化

    XML序列化与反序列化 1.将一个类转化为XML文件 /// <summary> /// 对象序列化成XML文件 /// </summary> /// <param na ...

  9. find

    语法:find [路径] [参数] [action] -name filename,查找名为filename的文件 -iname filename,查找名为filename的文件,但是不区分大小写 - ...

  10. linux 之静默安装oracle

    Web服务器上面的Linux一般是不会有图形界面的,所有通过图形界面来安装Linux的方式在没有图形界面的Linux上面是行不通的,我们要使用的安装方式叫做Linux的静默安装.即在没有图形界面的Li ...