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. ccf-炉石传说-201609-3

    大概是CCF 第三题比较简洁的一道题吧 尽量设计好一个数据结构: node t[2][10]: 存双方的英雄和随从 int    num[2]: 存隋朝的数量 用p来实现双方的切换,因为有统一 的接口 ...

  2. linux配置服务器

    梳理一下这次配置服务器的思路. 1,挂载磁盘 Java和neigx上传到根目录下,tomcat放在data目录下,数据库新建文件夹也在data下, 2,配置环境变量 3,nginx修改域名 4,数据库 ...

  3. 对于Vue的v-if 和 v-showi

    V-if   : 1. 是条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建. 2. 是惰性的,如果初始渲染条件为假,则什么都不做,直到条件第一次变为真的时候,开开始渲染 ...

  4. HtmlUnit学习总结

    HtmlUnit学习总结 转载 2016年09月13日 15:58:25 标签: htmlunit / 爬虫 7304 本文摘抄其他博客或者技术论坛,自己搜集整理如下: HtmlUnit学习总结 摘要 ...

  5. cpp实验二

    1.函数重载编程练习 编写重载函数add(),实现对int型,double型,Complex型数据的加法.在main()函数中定义不同类型 数据,调用测试. #include<iostream& ...

  6. vue-----样式绑定 事件处理

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name=& ...

  7. Comedi的学习过程

    1.介绍Comedi 1.1Comedi是一个设备驱动开发的软件工具,它采用了一种3层组织模型:上层是用户层,Comedi提供了在用户控件编写程序的接口Comedilib,通过系统调用来控制硬件设备: ...

  8. c# 公元转农历

    void Main() { ,,); GetLunarDisplay(date).Dump(); } public List<string> GetLunarYearList() { va ...

  9. nvm 知识点

    事项 作用 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash 安装nvm comm ...

  10. Dubbo和Spring Cloud

    1.Dubbo和Spring Cloud区别 1).通信方式不同 Dubbo使用RPC通信,Spring Cloud使用Http RestFul方式 2) 组成部分不同 组件 Dubbo Spring ...