CSS中的line-height行高属性学习教程

2020-05-09 06:44:09易采站长站整理
继承父元素计算后的line-height值 19.2px,而不是120%normal1.2自身font-size (16px) * 1.2 = 19.2px继承1.2,line-height = 自身font-size(32px) * 1.2 = 38.4px纯数字1.5自身font-size (16px) * 1.2 = 19.2px继承1.5,line-height = 自身font-size(32px) * 1.5 = 48px

四、示例
line-height百分比在面试中可能经常问到。例如你知道line-height:120%和line-height:1.2的区别吗?

现在就说一下行高带单位和不带单位的区别,例如下面的例子:

CSS Code复制内容到剪贴板

line-height:26px;  

 表示行高为26个像素

CSS Code复制内容到剪贴板

line-heigth:120%;  

表示行高为当前字体大小的120%

CSS Code复制内容到剪贴板

line-height:2.6em;   

表示行高为当前字体大小的2.6倍
带单位的行高都有继承性,其子元素继承的是计算值,如父元素的字体大小为14px,定义行高line-height:2em;则计算值为 28px,不会因其子元素改变字体尺寸而改变行高。(例如:父元素14px,子元素12px,那么行高就是28px,子元素虽然字体是12,行高还是父元素的行高)

CSS Code复制内容到剪贴板

line-height:2.6;  

表示行高为当前字体大小的2.6倍
不带单位的行高是直接继承,而不是计算值,如父元素字体尺寸为14px,行高line-height:2;他的行高为28px;子元素尺寸为12px,不需要再定义行高,他默认的行高为24px。(例如:子元素12px,他的行高是24,不会继承父元素的28)