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. Scrapy启动spider出错

    python 3.7 里,async变成了关键字,所以报错. 解决方法:1回退python3.6版本. 2找到报错的那个py文件,比如manhole.py,将函数参数async改个名字(比如改成asy ...

  2. 未解决的html页面banner对不齐

    莫名其妙的问题,记录等待解决: 怎么讲呢?就是可能真的没有理解这句话,浏览器是否是需要这句话的,思考! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  3. 理解ASP.NET Core - [01] Startup

    注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 准备工作:一份ASP.NET Core Web API应用程序 当我们来到一个陌生的环境,第一 ...

  4. java8时间类API安全问题(赠送新的时间工具类哟)

    LocalDateTime等新出的日期类全是final修饰的类,不能被继承,且对应的日期变量都是final修饰的,也就是不可变类.赋值一次后就不可变,不存在多线程数据问题. simpleDateFor ...

  5. jwt《token》

    payload与claims只能存在一个这部分是jwt源码:依赖如下:官方文档的依赖 <dependency> <groupId>io.jsonwebtoken</gro ...

  6. 🏆【JVM技术专区】「难点-核心-遗漏」TLAB内存分配+锁的碰撞（技术串烧）！

    JVM内存分配及申请过程 当使用new关键字或者其他任何方式进行创建一个类的对象时,JVM虚拟机需要为该对象分配内存空间,而对象的大小在类加载完成后已经确定了,所以分配内存只需要在Java堆中划分出一 ...

  7. Dockerfile自动化制作镜像

    1.创建Dockerfile文件:vim Dockerfile 2.Dockerfile的编写内容如下: 3.开始制作镜像 制作命令: docker build -t 镜像名:版本号 4.查看已经做好 ...

  8. 【死磕NIO】— NIO基础详解

    Netty 是基于Java NIO 封装的网络通讯框架,只有充分理解了 Java NIO 才能理解好Netty的底层设计.Java NIO 由三个核心组件组件: Buffer Channel Sele ...

  9. npm 设置同时从多个包源加载包的方法

    随着前后端分离技术的发展成熟,越来越来越多的后台系统甚至前端系统采用前后端分离方式,在大型前后端分离系统中,前端往往包含大量的第三方js 包的引用,各个第三方包又可能依赖另外一个第三方包,因此急需要一 ...

  10. pytest+allure基础知识

    介绍 pytest是基于unittest开发的另一款更高级更好用的单元测试框架 支持参数化 执行测试过程中可以将某些测试跳过(skip),或者对某些预期失败的case标记成失败 支持运行由 nose, ...