百分比，是一个相对值，不同属性的下的百分比，相对的计算基数则不同
font-size
font-size 中的百分比是相对于显式设置font-size的父元素（父元素未设置，继续向上）的，如果都没有找到，则使用页面默认font-size: 16px，该寻找过程有些类似冒泡的过程
举例说明：
<html>
<body>
<div class="container">
<p class="p">一段内容</p>
</div>
</body>
</html>
.p { font-size: 150%; }
-
父元素未设置明显的font-size，则 p 元素 默认使用浏览器的字体大小作为基准，即16px，计算结果为 16px * 150% = 24px
-
如果父元素设置了font-size
.container { font-size: 24px; }则 p 元素基于 container，结果为 24px * 150% = 36px;
-
如果父元素也设置为 百分比，则进行链式计算
.container { font-size: 150%; }则 container 的计算结果为 16px _ 150% = 24px，p 则基于 container 的结果 24px _ 150% = 36px
line-height
line-height具有继承性，在没有显式的写明line-height时，则继承自父级元素，当显式的写明line-height为百分比时，则是相对于自身 font-size 的
举例说明：
<html>
<body>
<div class="container">
<p class="p">一段内容</p>
</div>
</body>
</html>
.p {
font-size: 24px;
}
-
当父元素具有line-height，而元素自身没有显式指明 line-height 时，则使用继承 line-height
.container { font-size: 16px; line-height: 150%; }该情况下，p 元素的line-height继承自父元素的 16px * 150% = 24px
-
当元素自身具有line-height时，则使用自身的 font-size 进行计算
.container { font-size: 16px; line-height: 150%; } .p{ font-size: 24px; line-height: 150%; }该情况下，p 元素的 line-height 为 24px * 150% = 36px
width、height
width 和 height 的百分比是相对于其父元素的，但是当父元素没有显式的指明 width 和 height 时，当前节点的 width 和 height 则默认为 auto
在正常文档流下，父元素有显式的 width 和 height 时，百分比相对于 父元素的内容 width 和 height ，即 content；在绝对定位下，width 和 height 则相对于 父元素的内部总 width 和 height ，即 padding + content
margin、padding
margin 和 padding 的百分比都是相对于元素的 width 进行计算的
同样，在正常文档流下，是相对于 父元素的 content 的width 计算；在绝对定位下，则相对于 padding + content
transform
transform 中的百分比 是相对于元素本身的 width 和 height 进行计算的
所以解释了为什么在进行垂直居中时，推荐使用 transform ，而不能使用 margin，因为 transform 更适用于不定高的元素的垂直居中
border-radius
border-radius 的百分比 是相对元素的 width 和 height
举个例子：
<div class="container"></div>
.container {
width: 300px;
height: 200px;
border-radius: 50%;
}
top、right、bottom、left
在正常文档流下，即没有定位的情况下，以上属性无意义
在相对定位下，top 和 left 属性相对于当前位置的左上角为基准，bottom 和 right 则相对于当前位置的右下角为基准
在绝对定位下，以上属性是以向上最近一个不为静态定位的父元素为基准
