各种百分比的指向

相对于父级宽度（static、relative的元素计算时不包含父级padding,absolute、fixed的元素会加上父级的padding）的：

max-width、min-width、width、left、right、text-indent、padding、margin、grid-template-columns、grid-auto-columns、column-gap 等；

 

相对于父级高度（同上）的：

max-height、min-height、height、top、bottom、grid-template-rows、grid-auto-rows、row-gap 等；

 

相对于自身宽高的：

border-radius、background-size、border-image-width、transform: translate()、transform-origin、zoom、clip-path 等；

 

相对于主轴长度的：

flex-basis 等；

 

相对于继承font-szie的：

font-size 等；

 

相对于自身font-szie的：

line-height 等；

 

相对于line-height的：

vertical-align 等；

 

static、relative的父级即为 实际 父级元素

如果自身设置 position: absolute，“父级”指：相对于离它最近的那个 position 不为 static （relative、absolute、fixed）的祖先元素，如果没有这样的元素，则相对于视口

如果自身设置 position: fixed，“父级”指视口（父级不存在 transform 为非 none 值的情况下）。

 

欢迎关注、点赞