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

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--UILable自适应大小

    #import "ViewController.h" @interface ViewController () @property(strong,nonatomic) UILabe ...

  2. Vs2013 html5开发WP8.1 APP之jquery

    仿安卓原生界面,先使用JQM,最新的JQM使用了JQ1.8.5 然后在WP8以上就会遇到动态创建控件的安全性问题 换成JQ2.X即可,但在WP8.1中一定不要删除了 <script src=&q ...

  3. Oracle解锁,解决“ora00054:资源正忙”错误

    Oracle解锁,解决“ora00054:资源正忙”错误 一.处理步骤:--1.获取被锁对象的session_idSELECT session_id FROM v$locked_object; --2 ...

  4. SQL SERVER 作业浅析

    作业介绍 SQL SERVER的作业是一系列由SQL SERVER代理按顺序执行的指定操作.作业可以执行一系列活动,包括运行Transact-SQL脚本.命令行应用程序.Microsoft Activ ...

  5. C++11 - 类型推导auto关键字

    在C++11中,auto关键字被作为类型自动类型推导关键字 (1)基本用法 C++98:类型 变量名 = 初值;   int i = 10; C++11:auto 变量名 = 初值;  auto i ...

  6. 修改AndroidStudio中的Logcat中的默认设置

    按Ctrl+Alt+S打开Settings 在左上角的输入框中输入Locat 点右边的使用内部样式取消掉,好了,开始自定义吧.

  7. EcmaScript相关文档

    ecmascript5.1中文文档 ECMAScript 6入门 JavaScript 标准参考教程 ECMAScript 5.1简介 ES5中新增的Array方法详细说明 firefox社区java ...

  8. 【小白的CFD之旅】01 引子

    小白的CFD之旅 写在前面 CFD是计算流体力学的英文简称,是计算机辅助工程(CAE)的主要分支,目前广泛应用与科学研究.工程设计中.这是一门综合了数学.计算机及流体力学的综合学科,涉及到众多的专业理 ...

  9. [WPF系列]-使用Binding来同步不同控件的Dependency property

    简介 项目中经常会用到,同步两个控件的值,本文就简单列举两种方式来同步不同控件的两个Dependency Property. 示例 效果图: 只使用C#代码: //获取slider1的ValueDep ...

  10. 发一份shiro标准配置,特此记录

    主要还是整合了本地ehcache,集群session管理过段时间放出 <?xml version="1.0" encoding="UTF-8"?> ...