关于line-height这个css属性在平常布局中真的很熟悉了，以前简单的用法都是直接设置具体像素值：line-height:28px;随着考虑到响应式等因素，慢慢开始了解无单位数字和使用em或百分比。一直以来都觉得为什么需要定义三种格式？明明他们几个形式都是属于字号的倍数而已。所以一直想探究一下究竟有什么不一样。
首先我定义了四个p元素，每个line-height设置分别是px,em,无单位数值和百分比。效果如下：
发现它们在这种状态下是一样的，都是属于当前字号的2倍。
现在我们在它们的父元素进行设置line-height，分别尝试这四种形式时子元素是如何表现的。
首先使用具体像素值，子元素是继承父元素的具体像素值的，跟我们预想的结果一样：
其次使用em。发现与我们预期的不一样，一开始我们认为的是，em是当前字号的倍数。但现实是当父元素设置em时，子元素的line-height值是不会再重新与当前的字号进行计算的，而是直接继承父元素的字号倍数。
现在我们使用无单位数字。如果说em跟直接设置数字是一样为2倍的话，那他们的表现应该一致，也是父元素的字号*数字。但原来其它们并不一样，数字值对于子元素的继承是会与当前元素的字号再进行计算，即：当前字号*数字。数字属性才是真正意义上的字号的两倍，在响应式开发中是我们的，推荐使用此形式。
最后，我们使用百分比。这次已经不敢乱猜了，不自信自己是否真正了解line-height。demo表明百分比与em值的表现是一样的，同样是不会对子元素的字号再进行计算，而是直接继承父元素字号乘积，与当前元素的字号无关。
最后，line-height的除具体像素值外，其他三种形式在没有子元素的情况下，他们的表现是相同的。
他们的不同之处在于对子元素的继承。
在我们的响应式开发中，推荐使用无单位数字，能够让你在设置父元素的行高时响应整块区域，不需要进行多个元素多次赋值改变。
由此我们明白了line-height设置数字，em和百分比的区别。细节之处平时很少注意理解，希望有一天你也意识到对line-height确定时能看到这篇文帮助理解。ღ( ´･ᴗ･` )比心
