display:none

1.使元素隐藏，不再占据空间。

2.动态操作时会引起页面回流和重绘，影响性能。

3.子元素也会被隐藏并且添加display:block/visibility:visible无效。

visibility:hidden

1.使元素隐藏，占据空间。

2.只引起页面重绘，性能开销相对较低。

3.子元素也会被隐藏，但是添加visibility:visible子元素会显示。

注：回流和重绘见基础总结（05）-- 回流和重绘

基础总结（04）-- display:none;&&visibility:hidden;区别的更多相关文章

  1. display:none;visibility:hidden;opacity:0;之间的区别

    什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...

  2. div和span、relative和absolute、display和visibility的区别

    一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...

  3. display:none和visibility:hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

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

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

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

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

  6. hidden="hidden"，display:none, visibility:hidden 三者的区别

    三者都可以实现隐藏元素的效果 1:display:none 就是把元素隐藏,即在页面上看不到这个元素,并且不占据任何位置 2:hidden="hidden"在页面展示出来效果跟di ...

  7. display 和 visibility 的区别

    设置控件隐藏 1.display:none  不为元素保留位置 2.visibility:hidden  占位置,是对象在网页上看不到,所占空间没有变化

  8. display和visibility的区别

    一.display和visibility的相同与不同点 1.相同点:display和visibility都有讲元素隐藏的意思 2.不同点:display是元素隐藏,隐藏的元素不占文档流 而visibi ...

  9. Display与 Visibility的区别

    隐藏元素的方法有: display:none或visibility:hidden visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被 ...

随机推荐

  1. AI之旅（4）：初识逻辑回归

    前置知识   求导 知识地图   逻辑回归是用于分类的算法,最小的分类问题是二元分类.猫与狗,好与坏,正常与异常.掌握逻辑回归的重点,是理解S型函数在算法中所发挥的作用,以及相关推导过程. 从一个例子 ...

  2. python 11

    # 一.闭包 # # 判断:函数名.__closure__ # 若返回cell,则是闭包,返回None则不是闭包. # # 闭包:内层函数对外层函数非全局变量的引用就叫闭包. def func1(x) ...

  3. 20175120彭宇辰 《Java程序设计》第六周学习总结

    教材学习内容总结 第七章 一.内部类与外部类的关系 1.内部类可以使用外嵌类的成员变量和方法.2.类体中不可以声明类变量和类方法,外部类可以用内部类声明对象.3.内部类仅供外嵌类使用.4.类声明可以使 ...

  4. CSS制作环形进度条

    参考来源 <Radial progress indicator using CSS>,该文核心是用纯CSS来做一个环形的进度条.纯css的意思就是连百分比这种数字,都是css生成的.文章作 ...

  5. 下载python包

    修改pip下载源 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyspider 更新pip版本 python -m pip inst ...

  6. 简述osi七层模型和TCP/IP五层模型

    OSI七层模型 OSI七层模型的划分 应用层(Application).表示层(presentation).会话层(session).传输层(Transport).网络层(Network).数据链路层 ...

  7. [Java Web学习]junit.framework.AssertionFailedError: No tests found in {Class}

    No tests found in com.XXXXX.XXX.inboundPrepService.bizLogic.prepDeterminationEngine.workers.Determin ...

  8. 学习笔记CB005:关键词、语料提取

    关键词提取.pynlpir库实现关键词提取. # coding:utf-8 import sys import importlib importlib.reload(sys) import pynlp ...

  9. 关于pycharm中导入自己写的模块没有智能提示的解决办法

    在pycharm界面中右击py文件所在的文件夹,选择Make Directory as文件,选择其中一个即可

  10. 《大型网站系统与Java中间件实现》有感

    头一次只用了一周的时间就看完一本书<大型网站系统与Java中间件实现>,这本书是关于设计方面的,提到了服务框架,消息中间件,数据访问层,以及如何解决应用之间的调用,解耦,以及应用和存储之间 ...