元素寬高 + ,`min width max width`等元素寬度設置百分比,以 包含塊的寬度 為標準進行計算; + ,`min height max height`等元素寬度設置百分比,以 包含塊的高度 為標準進行計算; 內外邊距 ,`padding`設置百分比時,在預設(水平)書寫模式下,以 ...
元素寬高
width
,min-width
,max-width
等元素寬度設置百分比,以包含塊的寬度為標準進行計算;height
,min-height
,max-height
等元素寬度設置百分比,以包含塊的高度為標準進行計算;
內外邊距
margin
,padding
設置百分比時,在預設(水平)書寫模式下,以包含塊的寬度為標準進行計算,其他情況以包含塊的高度進行計算。所以正常情況下,margin-top,padding-top 等垂直方向上的內外邊距也都是以包含塊的寬度進行計算的
定位
left
,right
是以包含塊的寬度為標準進行計算的;top
,bottom
是以包含塊的高度為標準進行計算的;
需要註意這裡的包含塊是和設置的position
有關的:
absolute
:對象脫離常規流,此時偏移屬性參照的是離自身最近的定位祖先元素(position非static的元素),如果沒有定位的祖先元素,則一直回溯到body元素。fixed
:對象脫離常規流,偏移定位是以視窗為參考
絕對定位的元素,在top,right,bottom,left屬性未設置時,會緊隨在其前面的兄弟元素之後,但在位置上不影響常規流中的任何元素。
字體
font-size
設置百分比時,以父元素的字體大小的標準進行計算
行高
line-height
設置為百分比是,以自身字體大小為標準進行計算
邊框圓角
border-radius
使用百分數定義圓形半徑或橢圓的半長軸,半短軸。水平半軸相對於盒模型的寬度;垂直半軸相對於盒模型的高度
平移變換
translate()
即:translatex()
,translatey()
使用百分比定義,分別是以自身的寬度和高度進行計算
註意
註意:只有計算值是可以繼承的。所以,即使一個百分比值用於父屬性,一個真正的值,比如具體像素寬度
例如line-height
設置百分比時,子元素繼承是父元素乘以百分百之後的具體數值,所以可能會出現重疊現象。而設置為乘積因數就不會出現這種情況,子元素的行高為自身的font-size
乘以乘積因數