CSS 之 百分比（%）样式属性

​ 这篇博客主要是整理一下，CSS中所有可以使用 % 作为属性值的样式属性，并说明他们的基数取决于什么，有些样式属性的 % 取决于元素本身的属性，有些元素样式的 % 取决于其父元素的属性。整理的可能有遗漏，欢迎大家留言补充。

一、取决于父元素

1、(max/min-) height

​ 如果给子元素的height属性设置为 % ，则其基数取决于父元素的height属性。

2、(max/min-) width

​ 如果给子元素的width属性设置为 % ，则其基数取决于父元素的width属性。

3、padding

​ 如果给子元素的padding属性设置为 % ，无论上下左右方向，则其基数都取决于父元素的width属性。

4、margin

​ 如果给子元素的margin属性设置为 % ，无论上下左右方向，则其基数都取决于父元素的width属性。

5、border

​ 如果给子元素的border属性设置为 % ，无论上下左右方向，则其基数都取决于父元素的width属性。

6、text-indent

​ 如果给子元素的text-indent属性设置为 % ，则其基数都取决于父元素的width属性。

7、font-size

​ 如果给子元素的font-size属性设置为 % ，则其基数都取决于父元素的font-size属性。

二、取决于元素本身

1、border-radius

​ 如果元素的border-radius属性设置为 % ，则其基数都取决于元素本身的宽高属性。

2、transform:translate()

​ 如果元素的translate()/translateX()/translateY()属性设置为 % ，则其基数都取决于元素本身的宽/高属性。

3、background-size

​ 如果元素的background-size属性设置为 % ，则其基数都取决于元素本身的宽/高属性。

4、line-height

​ 如果元素的line-height属性设置为 % ，则其基数都取决于元素本身的font-size属性。

5、vertical-align

​ 如果元素的vertical-align属性设置为 % ，则其基数都取决于元素本身的line-height属性。

三、特殊

1、background-position

​ 该属性设置 % 的情况比较特殊，有两个值分别设置水平方向和垂直方向上的两个值，若是只提供一个百分数值，所提供的这个值将用做水平值，垂直值将假设为 50%。如果使用百分比，那么百分比值会同时应用于元素和图像。例如50％50％会把图片的（50％，50 ％）这一点与框的（50％，50％）处对齐，相当于设置了中心。同理0％0％相当于左上对齐，100％100％相当于右下对齐。

2、position

​ 如果给子元素的left、right属性设置为 % ，则其基数都取决于离它最近的position为absolute/relative/fixed的祖先元素的width属性。

​ 如果给子元素的top、bottom属性设置为 % ，则其基数取决于离它最近的position为absolute/relative/fixed的祖先元素的height属性。