CSS 有幾個不同的單位用於表示長度。
一些設置 CSS 長度的屬性有 width, margin, padding, font-size, border-width, 等。
長度有一個數字和單位組成如 10px, 2em, 等。
數字與單位之間不能出現空格。如果長度值為 0,則可以省略單位。
對於一些 CSS 屬性,長度可以是負數。
有兩種類型的長度單位:相對和絕對。
流覽器支持
下表中的數字表示支持該長度單位的最低流覽器版本。
長度單位 | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
vmax | 26.0 | 不支持 | 19.0 | 不支持 | 20.0 |
注意: Internet Explorer 9 通過不標準的名稱 vm 來支持 vmin 。
相對長度
相對長度單位指定了一個長度相對於另一個長度的屬性。對於不同的設備相對長度更適用。
單位 | 描述 | 線上實例 |
---|---|---|
em | 它是描述相對於應用在當前元素的字體尺寸,所以它也是相對長度單位。一般流覽器字體大小默認為16px,則2em == 32px; | |
ex | 依賴於英文字母小 x 的高度 | |
ch | 數字 0 的寬度 | |
rem | 根元素(html)的 font-size | |
vw | viewpoint width,視窗寬度,1vw=視窗寬度的1% | |
vh | viewpoint height,視窗高度,1vh=視窗高度的1% | |
vmin | vw和vh中較小的那個。 | |
vmax | vw和vh中較大的那個。 | |
% |
![]() |
提示: rem與em有什麼區別呢?區別在於使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。 |
---|
絕對長度
絕對長度單位是一個固定的值,它反應一個真實的物理尺寸。絕對長度單位視輸出介質而定,不依賴於環境(顯示器、解析度、操作系統等)。
單位 | 描述 | 線上實例 |
---|---|---|
cm | 釐米 | |
mm | 毫米 | |
in | 英寸 (1in = 96px = 2.54cm) | |
px * | 像素 (1px = 1/96th of 1in) | |
pt | point,大約1/72英寸; (1pt = 1/72in) | |
pc | pica,大約6pt,1/6英寸; (1pc = 12 pt) |
像素或許被認為是最好的"設備像素",而這種像素長度和你在顯示器上看到的文字螢幕像素無關。px實際上是一個按角度度量的單位。