一、相对于父级盒子
1- 盒子的width、height的百分比相对父级盒子的宽度和高度
2- margin、padding的百分比相对父级盒子的 “宽度”。 注意：都是只相对于宽度！！！
3- position: relative 相对定位元素的 top(bottom)、left(right)的百分比相对父级的高度和宽度
4- font-size的百分比相对父级盒子的字体大小
5- text-indent的百分比相对父级盒子的宽度
二、相对自身
1- border-radius 的百分比相对自身宽度
2- transform中的translate平移属性相对盒子自身的宽度和高度
3- transform中的origin元素变形原点属性的百分比相对盒子自身的宽度和高度
4- background中的size属性的百分比相对自身的宽度和高度
5- line-height 的百分比相对自身的字体大小
三、几个特殊的
1- position: absolute 绝对定位元素的 top、left的百分比相对其祖先元素中第一个开启非static定位的元素的高度和宽度。如果没有这样的元素，那么相对初始包含块(第一屏视口)的宽高
2- position: fixed 固定定位的top、left的百分比相对浏览器视口的高度和宽度
3- background中的position属性的百分比相对父级盒子的宽高减去背景图片的宽高所得到的剩余值来计算
四、小练习：如何只用百分比画出一个正方形的盒子？
#box {
width: 20%;
padding-top: 20%;
background-color: #bfa;
}
<body>
<div id="box"></div>
</body>
width用百分比表示，相对的是父级的宽度； padding用百分比表示时，相对的也是父级的宽度。 这样，用padding把盒子的高度撑开并设置和宽度一样的值，就得到一个正方形了。
