CSS 單位

CSS 有幾個(gè)不同的單位用于表示長(zhǎng)度。

一些設(shè)置 CSS 長(zhǎng)度的屬性有 width, margin, padding, font-size, border-width, 等。

長(zhǎng)度有一個(gè)數(shù)字和單位組成如 10px, 2em, 等。

數(shù)字與單位之間不能出現(xiàn)空格。如果長(zhǎng)度值為 0，則可以省略單位。

對(duì)于一些 CSS 屬性，長(zhǎng)度可以是負(fù)數(shù)。

有兩種類(lèi)型的長(zhǎng)度單位：相對(duì)和絕對(duì)。

瀏覽器支持

下表中的數(shù)字表示支持該長(zhǎng)度單位的最低瀏覽器版本。

長(zhǎng)度單位	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 通過(guò)不標(biāo)準(zhǔn)的名稱(chēng) vm 來(lái)支持 vmin 。

相對(duì)長(zhǎng)度單位指定了一個(gè)長(zhǎng)度相對(duì)于另一個(gè)長(zhǎng)度的屬性。對(duì)于不同的設(shè)備相對(duì)長(zhǎng)度更適用。

單位	描述	在線(xiàn)實(shí)例
em	它是描述相對(duì)于應(yīng)用在當(dāng)前元素的字體尺寸，所以它也是相對(duì)長(zhǎng)度單位。一般瀏覽器字體大小默認(rèn)為16px，則2em == 32px；	運(yùn)行代碼
ex	依賴(lài)于英文字母小 x 的高度	運(yùn)行代碼
ch	數(shù)字 0 的寬度
rem	rem 是根 em（root em）的縮寫(xiě)，rem作用于非根元素時(shí)，相對(duì)于根元素字體大?。籸em作用于根元素字體大小時(shí)，相對(duì)于其出初始字體大小。	運(yùn)行代碼
vw	viewpoint width，視窗寬度，1vw=視窗寬度的1%	運(yùn)行代碼
vh	viewpoint height，視窗高度，1vh=視窗高度的1%	運(yùn)行代碼
vmin	vw和vh中較小的那個(gè)。	運(yùn)行代碼
vmax	vw和vh中較大的那個(gè)。	運(yùn)行代碼
%	?	?

	提示: rem與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。

絕對(duì)長(zhǎng)度單位是一個(gè)固定的值，它反應(yīng)一個(gè)真實(shí)的物理尺寸。絕對(duì)長(zhǎng)度單位視輸出介質(zhì)而定，不依賴(lài)于環(huán)境（顯示器、分辨率、操作系統(tǒng)等）。

像素或許被認(rèn)為是最好的"設(shè)備像素"，而這種像素長(zhǎng)度和你在顯示器上看到的文字屏幕像素?zé)o關(guān)。px實(shí)際上是一個(gè)按角度度量的單位。

上一篇：CSS 函數(shù) 下一篇：CSS 顏色