CSS中百分比是相对于谁的

盒子模型

width、height（正常定位）

width 和 height 的百分比是分别根据父级元素块的宽度和高度来计算的。

margin-top, margin-left，padding-top, padding-left

相对于父级元素块的宽度。

border-radius

相对于自身的宽度。

定位

相对定位的 top、left

top 和 left 的百分比是分别根据父级元素块的高度和宽度来计算的。

绝对定位的 top、left、width、height

top、height 和 left、width 的百分比是分别根据包含它的第一个不是 static 定位的元素的高度和宽度来计算的。

固定定位的 top、left

top 和 left 的百分比是分别根据浏览器视口的高度和宽度来计算的。

transform

translate

是根据自身的宽高来计算的。

transform-origin：

相对于自身的宽高。

zoom：

相对于自身的宽高。

背景

background-size

相对于自身的宽高。
background-position：

相对于自身的宽高值减去背景图片的宽高值所得到的剩余值。因此，属性值"center center"和"50% 50%"是等价的，即如果设置了后者，背景图片会自动居中，不需要像定位那样还要transform偏移。

字体

font-size：相对于直接父元素的字体大小。

line-height：相对于自身的字体大小。

text-indent：相对于直接父亲元素的宽度。

好了本篇文章就到这里了，喜欢的话可以关注我，会持续更新的，有错误欢迎大家指出，大家可以在我这里互相讨论学习，一起进步。

青山不改 绿水长流 我们下篇文章见😋