查漏补缺——说说unset属性
2022/6/27 23:29:07
本文主要是介绍查漏补缺——说说unset属性,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
问题
如题所示
答案
css3 unset属性
CSS 中的 initial、inherit、unset、revert、all
相关源码:
<div class="hzh-back-top" v-show="hzhShow" @click.stop="hzhGetTop"> <img class="img1" src="../../static/_hzh-tortoise.svg" alt=""> <img class="img2" src="../../static/hzh-tortoise.svg" alt=""> <p>回到顶部</p> </div>
.hzh-back-top:hover .img1 { display: none; } .hzh-back-top:hover .img2 { display: unset; }
unset属性意思是未设置,而不是不设置,其实,它是关键字 initial 和 inherit 的组合。
什么意思呢?也就是当我们给一个 CSS 属性设置了 unset 的话:
- 如果该属性是默认继承属性,该值等同于 inherit
- 如果该属性是非继承属性,该值等同于 initial
那么display是否可以继承?
css中可以和不可以继承的属性
也就是display这个属性不可以继承,那么也就是此时的值等同于 initial,那么这个属性又是啥意思呢?
[译] 了解CSS的initial初始值
根据上面可以知道,这个值会直接继承浏览器的默认值,那么display这个属性,浏览器的默认值是什么呢?
详解CSS中的display属性
根据上面,我们可以知道display这个属性的默认值是inline-block,那么display: inline-block;
又是啥意思呢?
CSS中的 display:inline-block
inline-block
代表的是该元素高度和宽度可以设置,并且元素会在同一行显示。
如果把以下代码删除:
.hzh-back-top:hover .img1 { display: none; }
,显示的效果是这样的:
按照原来的,光标移到乌龟上,乌龟壳会因为display: none;
而消失,又因为乌龟会unset属性,这里省略一大堆默认属性,反正它是显示出来了。
这篇关于查漏补缺——说说unset属性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?