CSS基础 --- % 相对于谁

CSS 中，这个常见的 % 单位有着什么样的规则呢？这也是一道很好的面试题目，我们在这这篇文章进行梳理。

1. position: absolute 中的 %

对于设置绝对定位 position absolute 的元素，我们可以使用 left right 表示其偏移量，我们把这个元素的祖先元素中第一个存在定位属性的元素成为参照物元素，其中的 % 是相对于参照物的，left 相对于参照物的 width，top 相对于这个参照物的 height。

2. position: relative 中的 %

对于设置相对定位 position relative 的元素，% 的数值是相对与自身的，left 相对于自己的 width，top 相对于自己的 height。

3. position: fixed 中的 %

对于设置固定定位 position fixed 的元素，% 的数值是相对于视口的，left 相对于视口的 width，top 相对于视口的 height。

4. margin 和 padding 的 %

margin 和 padding 当中的 % 非常特殊，它是相对于父元素的宽度。没错，margin-top: 30%，相当于父元素宽度的 30%

5. border-radius 的 %

对一个正方形元素设置： border-radius: 50%
得到一个圆形，这里的 % 也是相对于自身宽高的。

6. background-size 的 %

background-size 的百分比和 border-radius 一样，也是相对于自身的宽高。

7. transform： translate

transform 的 translate 属性 % 是相对于自身的宽高，这也是我们上述代码能够实现居中的原因。

8. text-indent 的 %

text-indent 这个属性可以设置首行缩进，当使用 % 时，它是相对于父元素的 width。

9. font-size 的 %

相对于父元素的字体大小。

10. line-height 的 %

line-height 设置行高时，如果单位为 %，则相对于该元素的 font-size 数值。

这些就是我们常见的使用 % 的情况，还是很灵活多变的，具体细节都可以在 CSS 规范中找到。要求开发者的是了解常见的以及特殊的 % 场景。