当前位置: 首页 > article >正文

比较 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 :修改元素会造成重绘,性能消耗较少


http://www.kler.cn/news/108943.html

相关文章:

  • Hive SQL的编译过程
  • M1安装OpenPLC Editor
  • 2318.不同骰子序列的数目
  • 在Linux上使用Docker实现应用程序打包和分发
  • Day10力扣打卡
  • DIANA算法c++实现
  • Annotorious入门教程:图片注释工具
  • React 生成传递给无障碍属性的唯一 ID
  • 【Git企业开发】第一节.Git 初识
  • 队列(Queue)概念+通过单、双链表来模拟队列+环形队列+OJ面试题(用队列实现栈、用栈实现队列、设计环形队列)
  • [Python]unittest-单元测试
  • Pytorch detach()方法
  • Transformers实战(二)快速入门文本相似度、检索式对话机器人
  • ChatGPT扩展系列之ChatExcel
  • Python连接数据库报错处理
  • 数组OJ题汇总(一)
  • PHP下载文件
  • Linux shell编程学习笔记16:bash中的关联数组
  • 高级深入--day42
  • 缓解大模型幻觉问题的解决方案
  • Python算法例2 判断平方数
  • python基础语法(十一)
  • 【wespeaker】模型ECAPA_TDNN介绍
  • 【MATLAB源码-第58期】基于蛇优化算法(SO)和粒子群优化算法(PSO)的栅格地图路径规划最短路径和适应度曲线对比。
  • 【Flutter】Flutter 中的图片管理 图片优化的最佳实践
  • pandas 统计函数
  • UE5使用Dash插件实现程序化地形场景制作
  • 「实验记录」CS144 Lab0 networking warmup
  • docker 部署prometheus和grafana
  • Python之函数-函数概念