CSS中line-height属性的值分别代表什么

line-height属性有五种方式：

1. line-height: normal；（默认）

2. line-height: 1.32；（以下就叫他数值样式）

3. line-height: 200%；

4. line-height: 50px;

5. line-height: 5em;

第一种是默认样式；第四种是固定大小，剩下的是相对大小，也就是相对单位；相对单位都是拿自己的值和font-size相乘,比如1.32*14px，比如5em*14px，150%*14px。。。

这里重点说一下数值样式（就是第二种），下面举个例子：

body {
  font-size: 14px;
  line-height: 1.5;
}
h3 {
  font-size:32px;
}
p {
  font-size:20px;
}

如果父级body的line-height是数值1.5，那他里面的h3标签和p标签会继承父级的行高属性，也就是以下代码的效果：

body {
  font-size: 14px;
  line-height: 1.5;
}
h3 {
  font-size:32px;
  line-height: 1.5; /** 计算：32*1.5=48px*/
}
p {
  font-size:20px;
  line-height: 1.5; /** 计算：20*1.5=30px*/
}

这样h3的行高是直接继承的父级的样式；

下面再说一下如果是其他相对单位，比如150%，下面举个例子：

body {
  font-size: 14px;
  line-height: 150%; /** 父级是150% */
}
h3 {
  font-size:32px;
}
p {
  font-size:20px;
}

如果父级body的line-height是150%，那他里面的h3标签和p标签会继承父级的行高属性，但是注意，他不是直接继承而是计算好行高后再继承给子；也就是以下代码的效果：

body {
  font-size: 14px;
  line-height: 150%; /** 21px */
}
h3 {
  font-size:32px;
  line-height: 21px; /** 而不是之前的计算：32*1.5=48px*/
}
p {
  font-size:20px;
  line-height: 21px; /** 而不是之前的计算：20*1.5=30px*/
}

根据以上两个例子可以看出数值样式和其他相对单位的不同；一般都会使用数值样式