line-height

博客的：行高可设置1.5或1.6

使用line-height： em单位导致多行文本挤在一起了

当前元素根据font-size计算行高，继承给下面的元素

数值/百分比/em 的line-height值都有什么区别?

input默认行高是normal 而不是继承(inherit).

line-height如果是百分比 是:

  "相对于设置了该line-height属性的元素的font-size大小计算."

line-height 值的单位.

属性值用"尖括号"包裹, 视频里原话是: "特定的类".

注意 这里的最后一行小字!

   "根据 当前元素 的font-size大小计算".

line-height: 1.5          line-height:150%/1.5em

两者对当前元素的计算是一样的，但对可继承元素不同，前者的继承元素会根据继承元素的font-size重新计算行高，后者是当前元素计算后，把值继承给子元素

body全局数值行高使用经验，font-size：14px，line-height：1.4286

line-height为整数和百分比时的区别，数字是重新计算，百分比是继承line-height属性，推荐使用数字而不是百分比

line-height:<number>时，行高根据字体大小来计算

line-height的默认值是normal，与浏览器以及元素字体都相关联

行高的各类属性值：

1、行高支持的属性值：

normal/<number>/<length>/<percent>/inherit

1）normal：由浏览器，以及元素字体决定

2）<number>：根据当前元素的字体大小计算

如line-height:1.5;

    font-size：20px；

那么line-height=1.5*20=30px；

3）<length>：使用的具体的长度值作为行高值，line-height：1.5em，1.5rem，20px，20pt；

4）<percent>：使用百分比值作为行高值

如line-height：150%；

    font-size：20px；

那么line-height=150%*20=30px

5）inherit：继承

2、line-height：1.5  / 1.5em /150%;   的差别：

1）1.5：所有可继承元素根据font-size重计算行高

2）150%/1.5em：当前元素根据font-size计算行高，继承给下面的元素

3、body全局数值行高使用，匹配20像素

body{

   font-size:14px;

   line-height:20px / 1.4286;

}

因为不同浏览器和不同字体的行高不同，所以重置line-height。

line-height:1.42857在火狐和opera浏览器可以表现为20px，但是谷歌却是19px，所以向上取值line-height:1.4286，表现都为20px。

line-height 数值和百分比的差异

默认属性值： line-height: normal  跟着用户的浏览器走 。属性值还有数值，百分比，<length>，行高继承inherit

line-height:1.5;所有可继承元素根据font-size重新计算行高；

line-height:150%/1.5em 当前元素根据font-size计算行高，继承给下面的元素；

body全局数值行高使用

body{ 

    font-size:14px;

     line-height:1.4286;

}

在全局定义样式时，限定了字体大小，他的行高用20去除，然后小数点取第4位，并向上四舍五入，因为不同浏览器的行高时不同的！

如下面截图所示。

line-height各类属性值

line-height:normal 默认属性值

跟着用户的浏览器走，且与元素字体关联

line-height:<number>

使用数值作为行高值。例如 line-height:1.5;

根据当前元素的font-size大小计算

line-height:<lenght>

line-height:<percent>

使用百分比值作为行高值。例如：

line-height: 150%;

相对于设置了该line-height属性的元素的font-size大小计算

line-height: inherit

line-height:默认值（normal），用户的浏览器和字体相关 line-height:<number>,跟字体大小相关 line-height:1.5 所有可继承元素根据fontsize重新计算行高； line-height:150%;根据line-height元素的fontsize计算，并且直接继承给下面的子元素； 所以：：：：全局设置使用<number>类型