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

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. Unix Linux 通用vi命令,使用帮助手册【珍藏版】

    Vi 简介 Vi 是 Unix 世界里极为普遍的全萤幕文书编辑器,几乎可以说任何一台 Unix 机器都会提供这套软体.Linux 当然也有,它的 vi 其实是 elvis(版权问题),不过它们都差不多 ...

  2. 解决idea中执行maven命令失败的问题

    1.问题描述 如上图所示,在使用idea 里的maven命令执行项目打包时,有时候会报如下一个错误. -Dmaven.multiModuleProjectDirectory system proper ...

  3. Android layout_weight理解

    layout_weight属性只能用于LinearLayout布局,不能用于RelativeLayout等其他布局: layout_weight属性如果不设定,默认值为0: layout_weight ...

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

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

  5. 下一代Asp.net开发规范OWIN(1)—— OWIN产生的背景以及简单介绍

    随着VS2013的发布,微软在Asp.Net中引入了很多新的特性,比如使用新的权限验证模块Identity, 使用Async来提高Web服务器的吞吐量和效率等.其中一个不得不提的是OWIN和Katan ...

  6. 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式值

    问题描述:在SQL SERVER 2008中,向数据表中字段插入数据时,会报错,错误如下: 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式 ...

  7. mybatis 配置返回集合collection时只有一条记录

    查询语句配置如下: <select id="selectCustomerList" resultMap="CustomerDtoMap" paramete ...

  8. android onActivityResult无效或先执行或无回传问题

    我的问题属于第一种情况,更改后下确有回传结果. (http://www.cnblogs.com/tt_mc/p/3586834.html) Android Activity的加载模式和onActivi ...

  9. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  10. 学习Linux的编码风格

    对于编码,每个码农或许都会有自己的一套风格,很多人可能对编码风格压根就不关心,因为最终编译器编译出来的目标代码并不会受影响.但是在开发一个大型项目时,花费时间成本最多的永远是开发者们之间的沟通与交流. ...