css - lineHeight

line-height是个可继承css属性,如果你设置了这个值不是inherit或者"",那么它就和父元素没关系了,它会按照当前标签的字体大小计算,另外line-height的继承稍微有点复杂

 

line-height的几种定义方式:

 

1. p{ line-height:inherit; }

 

这种默认设置,就是你不定义line-height是的默认值

 

2. p{ line-height:normal; font-size:30px}  

 

这个normal值默认值, 在opera里面取的是当前标签的字体大小(30px),在webKit(chrome,safari),firefox,ie里面的取值是当前标签的字体大小的1.0~1.2之间(34px),这样看来一般情况下这个值最好别用。

 

 

2. p { line-height:150%; font-size:30px}
这个值就是取当前标签字体大小的百分比(45px),值的注意的是如果这个p标签下有行内标签,如果这个行内标签没有设置line-height或者
设置值是inherit或者""的话,它的line-height属性将继承p标签计算过的“绝对值”(45px而不是150%)
3. p { line-height:20px; }
这个就没的说了,实际值和被继承的值都是这个值(20px)

 

4. p { line-height:1.5em; }
这个和百分比的情况一样
5. p { line-height:1.2; font-size:30px }
这个是最值得注意的,它的取值很正常,就是当前标签字体大小的倍数,但是它如果被继承了,那么被继承的值还是这个倍数(1.2),
而不是计算后的值

 

总结:

除了倍数值,其他百分比(%),相对值(em), “比较绝对点的值”(px,pt...)都是被继承计算后的值

 

拓展:

其实,倍数的应用在css里面可以看做一个特殊情况,可以理解为它是在运行时执行的,而其他几种值是在定义时执行的,

例如下面的情况:

 

 

<div id="div1" style="font-size:150%;"> 倍数值

  <div id="div2" style=" font-size:150%">倍数值</div>

</div>

 

 

最终的结果是:

div1的字体大小值:16*150%

div2的字体大小值:16*150%*150%

 

 

理解为:css在定义到div2的时候,div2里面已经继承到了div1的值16*150%=24,这时候在定义font-size:150%就是24*150%=36

 

 

 

而:

 

 

 

<div id="div1" style="font-size:1.5;"> 倍数值

  <div id="div2" style=" font-size:1.5">倍数值</div>

</div>

 

 

最终的结果是:

div1的字体大小值:16*1.5

div2的字体大小值:16*1.5

 

理解为:css在定义到div2的时候,div2里面并没有继承到了div1里fontSize的具体值,也就是现在div2的值仍然是16px,这时候在定义font-size:1.5就是16*1.5

 

 

(*以上纯非官方个人理解,如果您非常非常偶然看到了,不要扔砖哦)

回答: 在Vue中使用CSS的background属性时,可以通过style绑定来设置background-image。例如,你可以在div元素上使用style绑定来设置background-image属性,如下所示: ```html <div class="login-container" :style="{ 'background-image': 'url(./登录页bg.png)' }"></div> ``` 这样就可以将指定的图片作为背景图像显示在div元素中了。[1] 另外,background属性是background-color、background-image、background-repeat、background-attachment、background-position和background-size等属性的缩写形式。你可以根据需要在style绑定中设置这些属性,如下所示: ```html <div :style="{ 'background-color': 'red', 'background-image': 'url(./image.jpg)', 'background-repeat': 'no-repeat', 'background-position': 'center', 'background-size': 'cover' }"></div> ``` 这样就可以设置div元素的背景颜色、背景图像、背景重复方式、背景位置和背景大小了。[2] 此外,你还可以根据条件计算来设置background属性的值。例如,你可以在Vue组件中使用计算属性来动态设置background属性,如下所示: ```html <template> <div :style="{ '--lineheight': lineheight }" class="text"> <div class="container"></div> </div> </template> <script> export default { name: 'QTest', props: { lineheight: { type: String, default: '200px' } }, } </script> <style lang="scss" scoped> .text { width: 100px; height: 400px; overflow: hidden; .container { height: calc(100% - var(--lineheight)); background-color: red; } } </style> ``` 在上述示例中,通过计算属性lineheight来动态设置div元素的高度,并将其作为背景属性中的变量(--lineheight)使用。这样可以根据条件计算来设置background属性的值。[3]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值