CSS元素隐藏方法总结
2024-09-01 13:37:30
display:none; visibility:hidden; opacity:0三者的区别
display:none;
- 该属性会让元素完全从DOM中消失，浏览器不渲染设置该属性的元素，不占据DOM树空间
- 无法进行事件监听，不可点击
- 动态修改该属性会造成重排，性能较差
- 继承性方面：非继承性！设置了该属性的元素的子元素即使设置display:block依然不会显示它的子元素
- transition不支持display的显示隐藏动画效果，但是display:none不会影响animation的动画效果！
visibility:hidden;
- 设置该属性的元素依然在DOM中，会被浏览器渲染，占据DOM树空间
- 但它无法被监听，因此不可点击
- 动态修改该属性会引成重绘，性能较display:none高
- 属于继承性属性！设置该元素的子元素如果修改visibility值是可以显示该子元素的！
- transition支持该属性
opacity:0;
- 占据空间，仅仅是设置透明度让该元素不可见
- 可以被监听，可以点击
- 动态修改不会造成重绘和重排，性能较高！
- 非继承性！设置该属性元素的子元素若设置opacity:1依然无法显示
- 可以配合transition显示淡入淡出效果
position:relative; z-index:-1;
- 元素占据空间
- 不可见
- 不可点击
position:absolute; z-index:-1;
- 元素不占据空间，因为absolute让该元素脱离文档流
- 不可见
- 不能点击
position:absolute; opacity:0;
- 元素不占据空间
- 不可见
- 可以点击
最新文章
- [LeetCode] Shortest Word Distance 最短单词距离
- switch(){}default后是有冒号的
- 在MACOS上实现交叉编译
- Notions of Flow Networks and Flows
- spring消费RESTfull服务
- PHOTOSHOP 半透明方格
- mysql 查询 字段的类型
- 前端开发面试题总结之——CSS3
- 【Netty】UDP广播事件
- rasa_core:基于机器学习的对话引擎
- Vimium快捷键记录
- hdfs性能调优(cloudera)
- 前端-JavaScript1-7——JavaScript之数学运算符
- 获取动态代理生成的.class文件
- gcc和vs在c的一些区别
- Error at offset之反序列化
- SpringMVC框架使用注解执行定时任务(转)
- 对call() apply() 方法的简单理解
- linux中的vim 编辑一行内容，如何使光标快速移动到行首和行尾以及行中间某处啊？
- style2paints、deepcolor、sketchkeras项目