CSS中属性百分比的基准点

1、属性百分比的基准点

1.1、基于包含块

以下的关于包含块（含块）的概念，不能简单地理解成是父元素。

如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的 position 不是static的父元素，比如为absolute，relative，或者 fixed 的父元素。而对于固定定位的元素，它的包含块是视口（viewport）。

1.1.1、基于包含块的宽度（width，min-width，max-width，margin，padding，left，right，text-indent）

百分比是基于包含块的宽度的属性：width，min-width，max-width，margin，padding，left，right，text-indent

1.1.2、基于包含块的高度（height，max-height，min-height，top，bottom）

百分比是基于包含块的高度的属性：height，max-height，min-height，top，bottom

 

1.2、基于元素的字体大小（line-height ）

line-height 的百分比基于该元素本身的字体大小

 

 1.3、基于元素的行高（vertical-align）

vertical-align 的百分比基于元素的行高 line-height 

（vertical-align 主要是设置行内元素的属性，该属性值设置行内元素相对于该元素所在的基线的垂直对齐位置。如果该行内元素是表格的单元格的话，该属性设置的是单元格内的内容的垂直方向的对齐位置）

 

1.4、font-size 的百分比

字体大小font-size 中的百分比是基于该元素所继承的字体大小的，也就是父元素的字体大小。

 

参考：https://blog.csdn.net/qq_41459038/article/details/81698551