CSS中屬性百分比的基準點

一、屬性百分比的基準點

1.一、基於包含塊

如下的關於包含塊（含塊）的概念，不能簡單地理解成是父元素。

若是是靜態定位和相對定位，包含塊通常就是其父元素。可是對於絕對定位的元素，包含塊應該是離它最近的 position 不是static的父元素，好比爲absolute，relative，或者 fixed 的父元素。而對於固定定位的元素，它的包含塊是視口（viewport）。

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.二、基於包含塊的高度（height，max-height，min-height，top，bottom）

百分比是基於包含塊的高度的屬性：height，max-height，min-height，top，bottom

 

1.二、基於元素的字體大小（line-height ）

line-height 的百分比基於該元素自己的字體大小

 

 1.三、基於元素的行高（vertical-align）

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

（vertical-align 主要是設置行內元素的屬性，該屬性值設置行內元素相對於該元素所在的基線的垂直對齊位置。若是該行內元素是表格的單元格的話，該屬性設置的是單元格內的內容的垂直方向的對齊位置）

 

1.四、font-size 的百分比

字體大小font-size 中的百分比是基於該元素所繼承的字體大小的，也就是父元素的字體大小。

 

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