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. linux 常用命令积累

    工作中常用的linux记录一下,方便查询使用 1.ln 创建连接 ,就是window上的快捷方式 创建软连接  ln -s 源文件 目标文件名   经常访问的文件夹(项目文件夹),在~创建一个软连很方 ...

  2. s21day17 python笔记

    s21day17 python笔记 一.内容回顾及补充 回顾 补充 第三方模块补充 需要下载安装后才能导入使用 安装方式: pip包管理工具 # 把pip.exe 所在的目录添加到环境变量中. pip ...

  3. Oracle数据导入Hbase操作步骤

    ——本文非本人原创,为公司同事整理,发布至此以便查阅 一.入库前数据准备 1.入hbase详细要求及rowkey生成规则,参考文档“_入HBase库要求 20190104.docx”. 2.根据标准库 ...

  4. mysql 外键和子查询，视图

    1.mysql 外键约束 建表时生成外键   foreing key ('sid') references' student'('id'); 建表后添加外键  alter table' course ...

  5. angular 实现左侧和顶部固定定位布局

    1 布局基于angular ng-zorro组件库实现 由于项目中使用了组件库并且要求响应式布局,卡在这个坑上两天,多次调试后终于解决 代码仅供参考,由于没有上传依赖的库和组件包无法直接运行,提供代码 ...

  6. Python学习笔记，day4

    Python学习第四天 一.装饰器 函数调用顺序: 其他高级语言类似,Python 不允许在函数未声明之前,对其进行引用或者调用 高阶函数: 满足下列条件之一就可成函数为高阶函数 某一函数当做参数传入 ...

  7. orientdb docker-compose 运行

    orientdb 很早就跑过,但是现在在跑,发现配置有些变动,原有studio 直接就可以访问的,新版本的居然还需要自己添加 server 的配置,所以为了方便使用docker-compose 运行, ...

  8. C# 生成海报，文本区域指定和换行，图片合成

    protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string path = Server.MapPa ...

  9. HttpSimpleClient连接服务器

    public class HttpSimpleClient { /** * 发送GET请求. */ static public HttpResult httpGet(String url, List& ...

  10. C# Enum 获取枚举属性

    Enum使用 获取枚举属性 注意:扩展方法必须定义为静态类,静态方法中. public enum EnumPatientSource { [Description("住院")] I ...