【CSS】CSS的相對單位
阿新 • • 發佈：2021-08-15
目錄
em
很多同學會認為em相對於父元素的字型大小，但是實際上，相對於誰取決於應用在什麼CSS屬性上。對於font-size來說，em是相對於父元素的字型大小；在line-height中，em卻是相對於自身的字型大小。
rem
rem 相對於根節點html的字型大小。
vw
vw 相對於視口寬度。
vh
vh與vw同理
vim
vmin 相對於視口的寬度或高度中較小的那個。
%
postion: absolute 中的 %
對於設定絕對定位元素，我們可以使用left, top表示其偏移量，我們把這個元素的祖先元素中第一個存在定位屬性的元素當做參照物，其中%是相對於參考物的， left 相對於參照物的width, top相對於參照物的height。
position: relative 中的 %
對於設定相對定位的元素，% 的數值是相對於自身的。
postion: fixed 中的%
對於設定固定定位的元素，%的數值是相對於視口的。
margin 和padding中%
margin和padding中的%非常特殊，它是相對於父元素的寬度的。
border-radius中的 %
我們就經常對一個正方形元素設定border-radius：50%來得到一個圓形，因此不難發現這裡的%是相對於自身寬高的。
background-size 中的 %
background-size中的%和border-radius中的一樣，也是相對於自身寬高的。
transform 中的%
transform 中的%也是相對於自身寬高的。
text-indent中的 %
text-indent這個屬性可以用來設定首行鎖進，其中%是相對於元素的width的。
font-size中的%
當前元素的字型大小用%設定時，會相對於父元素的字型大小進行換算。
line-height中的 %
使用line-height設定行高時，如果單位是%，則是相對於該元素的font-size數值的。
calc
calc 是一個響應式佈局計算單位