免費(fèi)AI編程助手
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ù)。
有兩種類型的長(zhǎng)度單位：相對(duì)和絕對(duì)。
瀏覽器支持
下表中的數(shù)字表示支持該長(zhǎng)度單位的最低瀏覽器版本。
| 長(zhǎng)度單位 | |||||
|---|---|---|---|---|---|
| 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 通過不標(biāo)準(zhǔn)的名稱 vm 來支持 vmin 。
相對(duì)長(zhǎng)度
相對(duì)長(zhǎng)度單位指定了一個(gè)長(zhǎng)度相對(duì)于另一個(gè)長(zhǎng)度的屬性。對(duì)于不同的設(shè)備相對(duì)長(zhǎng)度更適用。
| 單位 | 描述 | 在線實(shí)例 |
|---|---|---|
| em | 它是描述相對(duì)于應(yīng)用在當(dāng)前元素的字體尺寸，所以它也是相對(duì)長(zhǎng)度單位。一般瀏覽器字體大小默認(rèn)為16px，則2em == 32px； | 嘗試一下 |
| ex | 依賴于英文子母小 x 的高度 | 嘗試一下 |
| ch | 數(shù)字 0 的寬度 | |
| rem | 根元素（html）的 font-size | |
| vw | viewpoint width，視窗寬度，1vw=視窗寬度的1% | 嘗試一下 |
| vh | viewpoint height，視窗高度，1vh=視窗高度的1% | 嘗試一下 |
| vmin | vw和vh中較小的那個(gè)。 | 嘗試一下 |
| vmax | vw和vh中較大的那個(gè)。 | 嘗試一下 |
| % |
 | 提示: rem與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。 |
|---|
絕對(duì)長(zhǎng)度
絕對(duì)長(zhǎng)度單位是一個(gè)固定的值，它反應(yīng)一個(gè)真實(shí)的物理尺寸。絕對(duì)長(zhǎng)度單位視輸出介質(zhì)而定，不依賴于環(huán)境（顯示器、分辨率、操作系統(tǒng)等）。
| 單位 | 描述 | 在線實(shí)例 |
|---|---|---|
| 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) | 嘗試一下 |
像素或許被認(rèn)為是最好的"設(shè)備像素"，而這種像素長(zhǎng)度和你在顯示器上看到的文字屏幕像素?zé)o關(guān)。px實(shí)際上是一個(gè)按角度度量的單位。
更多建議：