CSS中百分比总结

tip

百分比用于继承，继承的是计算之后的值而不是百分比。

width,height

1. 相对于它的包含块。
2. 如果父元素没有设置height，那么相当于auto。

margin,padding

百分比的计算是基于其包含块的宽度

border-radius

横轴上的百分比参考的是元素自身的宽度，纵轴上的百分比参考的是元素自身的高度，负值是无效的

background-position

基于父元素减去子元素；
排版：(父元素-背景图片)*百分比

font-size

基于父元素的百分比

line-height

基于自身font-size;

vertical-align

基于自身的line-height。

bottom,left,top,right

bottom，top基于高度;right,left基于宽度。

transform: translate

基于自身的宽高，包含边和padding就是border-box