CSS 單位
CSS 單位
CSS 有幾種不同的單位來表示長度。
許多 CSS 屬性都接受“長度”值，例如 width、margin、padding、font-size 等。
長度 是一個數字後跟一個長度單位，例如 10px、2em 等。
注意： 數字和單位之間不能有空格。但是，如果值為 0，則可以省略單位。
對於某些 CSS 屬性，允許使用負長度。
長度單位有兩種型別：絕對單位和相對單位。
絕對長度
絕對長度單位是固定的，以這些單位表示的長度將顯示為確切的尺寸。
不建議在螢幕上使用絕對長度單位，因為螢幕尺寸差異很大。但是，如果輸出媒介已知（例如用於列印佈局），則可以使用它們。
| Unit | 描述 |
|---|---|
| 釐米 | 釐米 嘗試 |
| mm | 毫米 嘗試 |
| in | 英寸（1 英寸 = 96 畫素 = 2.54 釐米） 嘗試 |
| px * | 畫素（1 畫素 = 1/96 英寸） 嘗試 |
| pt | 點（1 點 = 1/72 英寸） 嘗試 |
| pc | 派卡（1 派卡 = 12 點） 嘗試 |
* 畫素 (px) 相對於檢視裝置。對於低解析度裝置，1px 是顯示屏的一個裝置畫素（點）。對於印表機和高解析度螢幕，1px 表示多個裝置畫素。
相對長度
相對長度單位相對於另一個長度屬性指定長度。相對長度單位在不同渲染媒介之間可以更好地縮放。
| Unit | 描述 | |
|---|---|---|
| em | 相對於元素的 font-size（2em 表示當前字型大小的 2 倍） |
試一試 |
| ex | 相對於當前字型的 x 字高（很少使用） | 試一試 |
| ch | 相對於“0”（零）的寬度 | 試一試 |
| rem | 相對於根元素的 font-size |
試一試 |
| vw | 相對於視口*寬度的 1% | 試一試 |
| vh | 相對於視口*高度的 1% | 試一試 |
| vmin | 相對於視口*較小尺寸的 1% | 試一試 |
| vmax | 相對於視口*較大尺寸的 1% | 試一試 |
| % | 相對於父元素 | 試一試 |
提示： em 和 rem 單位在建立完美可伸縮佈局方面非常實用！
* 視口 = 瀏覽器視窗大小。如果視口寬度為 50 釐米，則 1vw = 0.5 釐米。
瀏覽器支援
表中數字指定了第一個完全支援該長度單位的瀏覽器版本。
| 長度單位 | |||||
|---|---|---|---|---|---|
| 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 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
