line-height
参照是元素自身的font-size。例如，一个元素的font-size是12px，那么line-height:150%;的效果是line-height:18px;。
vertical-align
参照是元素自身的line-height（和前面很有关联吧，所以我排在了这里）。例如，一个元素的line-height是30px，则vertical-align:10%;的效果是vertical-align:3px;。
对这个属性我还想说，尽管vertical-align可以使用数字，百分比值，但浏览器兼容性差异较大，在跨浏览器实现时可能需要较多hack。因此，我个人倾向于使用middle等相对来说兼容性差异较小的关键字类型的值。
定位用的bottom、left、right、top
参照是元素的包含块。left和right是参照包含块的宽度，bottom和top是参照包含块的高度。
transform: translate
平移变换，在水平方向和垂直方向上也可以使用百分比，其参照是变换的边界框的尺寸（等于这个元素自己的border-box尺寸）。例如，一个宽度为150px，高度为100px的元素，定义transform:translate(50%, 50%)的效果是transform:translate(75px, 50px);。
还可以补充一点，translate3d对应是还有第三个维度的，但是，经过测试，最后的第3个值不可以使用百分比（否则样式定义无效）。至于为什么不可以参照呢，大概是因为那是神秘的第三维度吧…
其他
如果你想要知道更多的百分比值在css属性中的可用情况及参照值，请参考MDN的CSS percentage values。
百分比值的继承
请注意，当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值本身。例如，一个元素的font-size是14px，并定义了line-height:150%;，那么该元素的下一级子元素继承到的line-height就是21px，而不会再和子元素自己的font-size有关。
结语
好不容易终于看完了这么多百分比值的用法，有兴趣要使用一些吗？(?-?*)
我自己的看法是，百分比值是css所提供的一种建立元素与元素之间，或者元素的不同属性之间的关联性的有效方法。只要是想建立一种关联性，都可以适当考虑使用百分比值。而且，不需自己做任何动态的事件处理和更新，任何时候，你都可以信赖这个百分比。
