zoukankan
html css js c++ java
分析比较 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
。
今天你学习了吗!!!
查看全文
相关阅读:
Tomcat 7.x 6.x 和 JDK 7 旧版本下载教程
下载ios系统文件,使用UltraISO刻录系统(windows Server)光盘,安装操作系统
MSDN, 我告诉你
669. 修剪二叉搜索树
99. 恢复二叉搜索树
windows系统 python安装uwsgi教程
mysql5.7修改密码命令
客户端浏览器访问django服务器
二、kafka的环境部署+命令行
二十、SpringCloud Alibaba Seata处理分布式事务(一、基础)
原文地址:https://www.cnblogs.com/nayek/p/11813741.html
最新文章
spring boot项目12:Kafka-基础使用
spring boot项目11:RabbitMQ-基础使用
spring boot项目10:Redis-直接使用
spring boot项目09:全局异常处理-基础使用
spring boot项目08:切面(AOP)-基础使用
HTTPS 详解
窗口消息
使用elasticsearch 自带pipeline 功能来解析geoip
去除新冠疫苗接种系统导出的Excel表格数据中的干扰字符。
IDEA 忽略日志,注释日志,log日志上显示不打印,但是需要看日志的情况
热门文章
【小米路由器mini】breed刷回官方固件
RabbitMQ从零到集群高可用.NetCore(.NET5)
RabbitMQ从零到集群高可用.NetCore(.NET5)
RabbitMQ客户连接池的实现
做iOS自动化测试必须知道的一些知识
如何用PLSQL登录Oracle数据库
ORA-12541TNS无监听程序解决方案
《《《PL/SQL官网下载
《《《oracle下载64位破解版 11g 安装,卸载
使用exp/imp导出/导入Oracle数据库表结构信息和表数据(oracle数据库表中含有blob字段,导出表提示有blob字段无法导出.sql类型的文件 解决办法 用命令导出.dmp文件 cmd 命令吧oracle表结构和数据)
Copyright © 2011-2022 走看看
总结:
display: none;
display
属性为none
的元素,不占据空间;transition
不支持display
。visibility: hidden;
visibility: visible;
来取消隐藏;transition
不支持display
。opacity: 1
来取消隐藏;transition
不支持opacity
。