分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
总结:
结构: display:none: 会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击, visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,不能点击 opacity: 0: 不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击
继承: display: none和opacity: 0:是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。 visibility: hidden:是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显式。
性能: displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容,性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 : 修改元素会造成重绘,性能消耗较少
联系:它们都能让元素不可见
补充:株连性 如果祖先元素遭遇某祸害,则其子孙孙无一例外也要遭殃,比如: opacity:0和display:none,若父节点元素应用了opacity:0和display:none,无论其子孙元素如何挣扎都不会再出现在大众视野; 而若父节点元素应用visibility:hidden,子孙元素应用visibility:visible,那么其就会毫无意外的显现出来。
总结:
- display: none (不占空间,不能点击)(场景,显示出原来这里不存在的结构)
- visibility: hidden(占据空间,不能点击)(场景:显示不会导致页面结构发生变动,不会撑开)
- opacity: 0(占据空间,可以点击)(场景:可以跟transition搭配)
总结:
display: none;
- DOM 结构:浏览器不会渲染
display
属性为none
的元素,不占据空间; - 事件监听:无法进行 DOM 事件监听;
- 性能:动态改变此属性时会引起重排,性能较差;
- 继承:不会被子元素继承,毕竟子类也不会被渲染;
- transition:
transition
不支持display
。
visibility: hidden;
- DOM 结构:元素被隐藏,但是会被渲染不会消失,占据空间;
- 事件监听:无法进行 DOM 事件监听;
- 性 能:动态改变此属性时会引起重绘,性能较高;
- 继 承:会被子元素继承,子元素可以通过设置
visibility: visible;
来取消隐藏; - transition:
transition
不支持display
。
- opacity: 0;
- DOM 结构:透明度为 100%,元素隐藏,占据空间;
- 事件监听:可以进行 DOM 事件监听;
- 性 能:提升为合成层,不会触发重绘,性能较高;
- 继 承:会被子元素继承,且,子元素并不能通过
opacity: 1
来取消隐藏; - transition:
transition
不支持opacity
。
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景的更多相关文章
- CSS:opacity:0,visibility:hidden,display:none的区别
CSS中opacity=0,visibility=hidden,display=none的时候,三者有什么区别呢?? 参考了stackoverflow的博客,才发现区别如下所示: Here is a ...
- CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析
说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...
- css隐藏元素display:none,opacity:0;filter:alpha(opacity=0-100;,visibility:hidden的区别
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...
- visibility和display的异同
都有隐藏节点的作用. visibility:hidden; display:none; (1)visibility 规定了元素是否可见,即使不可见也会占用上面的空间,在这里就是在指它与display的 ...
- visibility,display区别
visibility:hidden,display:none 前者隐藏位置还在,后者隐藏位置消失
- display: none;、visibility: hidden、opacity=0区别总结
display: none; 1.浏览器不会生成属性为display: none;的元素. 2.display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排. 3.disp ...
- display:none;visibility:hidden;opacity:0;之间的区别
什么是回流 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流(reflow).每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是 ...
- display:none、visibility:hidden,opacity:0三者区别
1. display:none 设置display:none,让这个元素消失 消失不占据原本任何位置 连带子元素一起消失 元素显示:display:block 2. visibility:hidden ...
- display:none,overflow:hidden,visibility:hidden之间的区别
一,display:none; 隐藏元素,不占网页中的任何空间,让这个元素彻底消失(看不见也摸不着) 二,overflow:hidden; 让超出的元素隐藏,就是在设置该属性的时候他会根据你设置的宽高 ...
随机推荐
- nyoj 779-兰州烧饼 (ceil)
779-兰州烧饼 内存限制:64MB 时间限制:1000ms 特判: No 通过数:6 提交数:8 难度:1 题目描述: 烧饼有两面,要做好一个兰州烧饼,要两面都弄热.当然,一次只能弄一个的话,效率就 ...
- 力扣(LeetCode)位1的个数 个人题解
编写一个函数,输入是一个无符号整数,返回其二进制表达式中数字位数为 ‘1’ 的个数(也被称为汉明重量). 示例 1: 输入:00000000000000000000000000001011 输出:3 ...
- python:类5——Python 的类的下划线命名有什么不同?
首先是单下划线开头,这个被常用于模块中,在一个模块中以单下划线开头的变量和函数被默认当作内部函数,如果使用 from a_module import * 导入时,这部分变量和函数不会被导入.不过值得注 ...
- RNN-LSTM讲解-基于tensorflow实现
cnn卷积神经网络在前面已经有所了解了,目前博主也使用它进行了一个图像分类问题,基于kaggle里面的food-101进行的图像识别,识别率有点感人,基于数据集的关系,大致来说还可行.下面我就继续学习 ...
- 【论文阅读】Learning Dual Convolutional Neural Networks for Low-Level Vision
论文阅读([CVPR2018]Jinshan Pan - Learning Dual Convolutional Neural Networks for Low-Level Vision) 本文针对低 ...
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- 使用 buildx 构建多平台 Docker 镜像
原文链接:使用 buildx 构建多平台 Docker 镜像 在工作和生活中,我们可能经常需要将某个程序跑在不同的 CPU 架构上,比如让某些不可描述的软件运行在树莓派或嵌入式路由器设备上.特别是 D ...
- 使用selenium模拟登陆新浪微博
1.selenium基本使用 1.selenium安装及基本操作 selenium是一个自动化测试工具,它支持各种浏览器,包括Chrome,Safari,Firefox等主流界面浏览器驱动,也包括Ph ...
- 使用spring boot配置Gmail邮箱发送邮件
最近项目有用到配置Gmail来发送通知邮件给客户,由于国内众所周知的原因,联调测试中遇到了一些问题,不过好在都一一解决了,现在做个记录,也给其他同仁做个参考. 相关配置: spring.mail.ho ...
- PHP安装sodium加密扩展
1.为什么会用到sodium加密扩展? 最近在做微信服务商相关的开发,主要用的的接口为微信小微商户进件接口.在请求相关接口中,需要对一些敏感字段进行加密,加密过程见https://pay.weixin ...