CSS百分比单位总结

CSS中的很多地方都是可以使用百分比单位的，之前一直理所当然的认为百分比就是相对于容器的宽高设定的，后来在自己实现垂直居中的多种写法时，才意识到这个问题，遂收集资料进行整理。

1. 相对于容器的宽度的
   相对于content-box宽度
   width | max-width | min-width | margin | padding | grid-template-columns | grid-auto-columns | column-gap
   相对于border-box宽度
   left | right
   也就是说设置的box-sizing属性会直接影响到百分比的计算值
   (已经在chrome下进行测试)
2. 相对于容器content-box的高度的
   相对于content-box高度
   height | max-height | min-height | grid-template-rows | grid-auto-rows | row-gap
   相对于border-box高度
   bottom | top
   (已经在chrome下进行测试)
3. 相对于自身宽高的
   background-size | broder-radius | transform: translate() | border-image-width | transform-origin
4. 相对于父元素的font-size的
   font-size
   (已经在chrome下进行测试)
5. 相对于自身字号的
   line-height
   (已经在chrome下进行测试)
6. 相对于行高的
   vertical-align
   (已经在chrome下进行测试)
7. 其他特殊

文中的大部分属性的百分比单位自己都在chrome下进行了测试，其中相对于自身宽高一项未测试。文中描述如有错误，欢迎大家指出来一起交流。

本文参考如下文章
1. 知乎问答：css样式的百分比都相对于谁
2. 深入理解line-height与vertical-align

这个line-height为vertical-algin的讲解比较深入细致，有时间自己要研究一下，进行一下总结。