1. display:none

  • 设置display：none，让这个元素消失

  • 消失不占据原本任何位置

  • 连带子元素一起消失

  • 元素显示：display:block

2. visibility:hidden

  • 元素消失，只是视觉消失，在页面中实际存在，对布局依然起作用

  • 元素显示：visibility:visible

3. opacity:0

  • opacity值为0代表透明度为0

  • 元素完全透明，视觉上消失，页面实际存在，依然对布局起作用

  • 0-1之间代表透明度，值为1则元素完全显示

display:none、visibility:hidden，opacity:0三者区别的更多相关文章

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

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

  2. css隐藏元素display：none，opacity:0;filter：alpha(opacity=0-100;，visibility：hidden的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...

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

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

  4. CSS隐藏元素 display、visibility、opacity的区别

    关于使指定元素无法在视野内看到,有3个方法 display: none; opacity: 0; visibility: hidden; 1.display: none; 该方法会改变页面布局. 元素 ...

  5. 基础总结（04）-- display:none;&&visibility:hidden;区别

    display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...

  6. 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

    总结: 结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是 ...

  7. css中display:none与visibility: hidden的区别

    display: none; 隐藏元素,不占用其本来空间------对应元素显示用的是display:block; visibility: hidden:元素隐藏,占用其本来的页面空间-------- ...

  8. css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  9. 前端学习 -- Css -- display和Visibility

    display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3 ...

随机推荐

  1. 关于Typora的使用

    关于Typora的使用 今天介绍一个做笔记用的一款markdown编辑器,用了之后,顺利被圈粉: Typora,美观小众,可用性强! 和传统的markdown编辑器不一样,传统的markdown编辑器 ...

  2. 剖析虚幻渲染体系（11）- RDG

    目录 11.1 本篇概述 11.2 RDG基础 11.2.1 RDG基础类型 11.2.2 RDG资源 11.2.3 RDG Pass 11.2.4 FRDGBuilder 11.3 RDG机制 11 ...

  3. golang context包

    go context标准库 context包在Go1.7版本时加入到标准库中.其设计目标是给Golang提供一个标准接口来给其他任务发送取消信号和传递数据.其具体作用为: 可以通过context发送取 ...

  4. 矩阵BFS

    leetcode 1091矩阵BFS 在一个 N × N 的方形网格中,每个单元格有两种状态:空(0)或者阻塞(1). 一条从左上角到右下角.长度为 k 的畅通路径,由满足下述条件的单元格 C_1, ...

  5. Flask（6）- debug 模式

    使用 Flask 开发过程中存在两个常见的问题 当 Flask 程序出错时,没有提示错误的详细信息 修改 Flask 源代码后需要重启 Flask 程序 这两个问题非常的影响开发效率,因此 Flask ...

  6. java：volatile关键字原理

    volatile说明 在变量中声明后,能够在所有线程中共享改变量.并且volatile关键字能防止指令重排,即程序读取到volatile时,则不会将程序执行顺序修改. 先了解下内存模型 cpu内存模型 ...

  7. IPsec 9个包分析（主模式+快速模式）

    第一阶段:ISAKMP协商阶段 1.1 第一包 包1:发起端协商SA,使用的是UDP协议,端口号是500,上层协议是ISAKMP,该协议提供的是一个框架,里面的负载Next payload类似模块,可 ...

  8. jQuery判断多种数据类型

    1.判断是否为数组类型 var obj=[0]; alert((typeof obj=='object')&&obj.constructor==Array)   2. 判断是否为字符串 ...

  9. Activiti 学习（四）—— Activiti 结合实际业务

    流程实例 流程实例(ProcessInstance)代表流程定义的执行实例.一个流程实例包括了所有的运行节点.我们可以利用这个对象来了解当前流程实例的进度等信息.例如:用户或程序按照流程定义内容发起一 ...

  10. JavaScript循环 — for、for/in、while、do/while

    for 多次遍历代码块 const array = []for (var i = 0; i < 5; i++) { array.push(i)}console.log(array) // [0, ...