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