设置百分数相对性问题

对一个子元素css属性设置了百分数，可是有时不会生效，这里面涉及一个相对性的问题。

1.对于static定位的元素，它样式属性的百分比，是相对自己的父元素样式属性的

2.对于relative\absolute定位的元素，它样式属性的百分比，是相对自己的最近的定位为relative\absolute定位的元素样式属性的，如果到最上级都没有定位元素，则是相对于视口

下面是具体规则：

1.相对于父元素宽度的百分比

width、left、right、padding、margin

2.相对于父元素高度的百分比

height、top、bottom

3.相对于继承font-size的百分比

font-size

4.相对于自身font-size的半分比

line-height

5.相对于自身宽高的百分比

border-radius、background-size、transform: translate()

注意：如果父元素高度为0的话，会继续向上寻找有高度的元素,当存在padding时，width、height是相对与父元素padding+width来定的