line-height: 2和line-height: 200%的区别

在日常的项目开发中，常常会用到line-height，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是更深层次的了解什么是line-height，二是比较一下line-height: 2和line-height: 200%的区别。

基本概念

行高与行距从字面的意思是非常容易理解的，但是对布局和样式来说，我们应该更深入的理解各个属性之间的关系，比如line-height与font-size存在什么关系呢，line-height与所属元素的height又有什么联系呢？好了，带着疑问，我们一同探究。 行高是指文本行基线间的垂直距离。 基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高，上行的底线和下一行顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距。

从上图我们就可以看出，行距、font-size与line-height之间的关系了吧。

那么line-height: 2和line-height: 200%有什么区别呢？

<div class="father">
    <div class="son"></div>
</div>



.father {
    font-size: 20px;
    line-height: 30px;
}
.son {
    font-size: 16px;
    //此时son元素的行高为30px
}



.father {
    font-size: 20px;
    line-height: 2;
}
.son {
    font-size: 16px;
    //此时son元素的行高为32px(2*16)
}



.father {
    font-size: 20px;
    line-height: 200%;
}
.son {
    font-size: 16px;
    //此时son元素的行高为40px(200% * 父元素的字体大小 = 2*20 = 40)
}