單位 | 含義 |
em | 相對於父元素的字體大小,若父元素font-size爲16px,那麼1em就爲16px |
ex | 相對於小寫字母"x"的高度 |
gd | 一般用在東亞字體排版上,這個與英文並無關係 |
rem | 相對於根元素字體大小,若根元素font-size爲16px,那麼1em就爲16px |
vw | 相對於視窗的寬度:視窗寬度是100vw |
vh | 相對於視窗的高度:視窗高度是100vh |
vm | 相對於視窗的寬度或高度,取決於哪個更小 |
ch | 1ch的大小和字母o的寬度相等 |
px | 相對於屏幕分辨率而不是視窗大小:通常爲1個點或1/72英寸 |
in | inch, 表英寸 |
cm | centimeter, 表釐米 |
mm | millimeter, 表毫米 |
pt | 磅,1/72英寸,絕對長度單位 |
pc | 12點活字,或1/12點,絕對長度單位 |
% | 相對於父元素。正常情況下是通過屬性定義自身或其他元素 |
1in = 2.54cm = 25.4 mm = 72pt = 6pc
單位 | 含義 |
deg | degrees, 角度,一個圓360度 |
grad | grads, 梯度,一個圓400梯度 |
rad | radians, 弧度,一個圓2π弧度 |
turn | turns, 圈數,一個圓共一圈 |
ms | milliseconds, 毫秒數 |
s | seconds, 秒數 |
Hz | Hertz, 赫茲 |
kHz | kilohertz, 千赫 |
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
vw,vh,vm:
爲css3新單位。
所提到的視窗:“視區”所指爲瀏覽器內部的可視區域大小,即window.innerWidth/window.innerHeight大小,不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。
可用來做響應式佈局。如設置寬度爲20vw,高度爲40vh,表示當前元素在任何屏幕下都是div佔當前屏幕寬度的20%,當前高度的40%。但兼容性不好,使用並不廣泛。
ex:
ex單位被定義爲”當前字體的x-height或者一個em的一半”。給定的字體的x-height是指那個字體的小寫x的高度。通常,這是這個字體的中間的標誌。
ch:
給定一個等寬字體的字體,一個N個字符單位寬的盒子,比如width:40ch;
,可以一直容納一個有40
個字符的應用那個特定字體的字符串。