1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS行高line-height:2和line-height:200%的区别

CSS行高line-height:2和line-height:200%的区别

时间:2022-10-02 00:24:57

相关推荐

CSS行高line-height:2和line-height:200%的区别

行高line-height:2和line-height:200%他们的意思都表示了行高是字体大小的2倍,那么是否有区别?

答案是肯定是:有

当它们写在父容器中时,子元素的字体大小不一样的时候,区别就体现出来了。

line-height: 2 写在父容器中,

那么子元素的行高都是自身高度的2倍,是相对大小。子元素的字体大小不同,行高也会不同。

line-height:200%;写在父容器中

那么浏览器会立刻计算出行高的具体值,假如父容器的默认字体大小是40px,那么计算得到的行高就是2×40px=80px,子元素的行高都会继承这个32px,是固定大小。

子元素的字体大小不同,行高都是固定某个值。

DEMO1:line-height行高为百分比的时候 200%

源码:

效果:line-height行高为80px,也就是在line-height:200%的时候,子div b继承了父div a的行高

DEMO2:line-height行高为数字的时候 2

源码:仅修改.a的css,line-height: 200%;改为line-height:2;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。