屬性設置百分比時的計算參考匯總


元素寬高

  • 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乘以乘積因子


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM