top
Loading...
CSS 單位

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實際上是一個按角度度量的單位。

北斗有巢氏 有巢氏北斗