line-height: 150% 和 line-height: 1.5 的差别
无    2014-09-17 22:07:12    754    0    0
life

line-height属性的细节
与大多数CSS属性不同,line-height支持属性值设置为无单位的数字。有无单位在子元素继承属性时有微妙的不同。

语法
line-height: normal | <number> | <length> | <percentage>
normal 根据浏览器决定,一般为1.2。
number 仅指定数字时(无单位),实际行距为字号乘以该数字得出的结果。可以理解为一个系数,子元素仅继承该系数,子元素的真正行距是分别与自身元素字号相乘的计算结果。大多数情况下推荐使用,可以避免一些意外的继承问题。
length 具体的长度,如px/em等, 如果是px, 就是这个值, 不管font-size多大.
percentage 百分比,100%与1em相同, 1.5em=150%

--------------------------------------

line-height属性的细节

与大多数CSS属性不同,line-height支持属性值设置为无单位的数字。有无单位在子元素继承属性时有微妙的不同。

有单位(包括百分比)与无单位之间的区别
有单位时,子元素继承了父元素计算得出的行距;无单位时继承了系数,子元素会分别计算各自行距(推荐使用)。

当line-height:xxx %或1.3em时:

body{ font-size:14px; line-height:150%;  }
h1{ font-size:26px; }
实际结果就是:
body{ line-height:21px;  /* 14px*150%=21px */ }  
h1{ line-height:21px; }  /* 继承父元素计算出来的line-height ,21px */

当line-height: x.x 时:

body{ font-size:14px; line-height:1.5;  }
h1{ font-size:26px; }
实际结果就是:
body{ line-height: 21px; /* 14px*1.5=21px */ }   
h1{ line-height: 39px; /* 26px*1.5=39px */ }   



 
 
 

上一篇: leanote功能列表

下一篇: leanote换新logo啦

754 人读过