CSS 單位

CSS 有幾種表示長度的不同單位。

許多 CSS 屬性接受“長度”值，諸如 width、margin、padding、font-size 等。

長度是一個后面跟著長度單位的數字，諸如 10px、2em 等。

使用 px（像素）設置不同的長度值：

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

數字和單位之間不能出現空格。但是，如果值為 0，則可以省略單位。

對于某些 CSS 屬性，允許使用負的長度。

長度單位有兩種類型：絕對單位和相對單位。

絕對長度

絕對長度單位是固定的，用任何一個絕對長度表示的長度都將恰好顯示為這個尺寸。

不建議在屏幕上使用絕對長度單位，因為屏幕尺寸變化很大。但是，如果已知輸出介質，則可以使用它們，例如用于打印布局（print layout）。

* 像素（px）是相對于觀看設備的。對于低 dpi 的設備，1px 是顯示器的一個設備像素（點）。對于打印機和高分辨率屏幕，1px 表示多個設備像素。

相對長度單位規定相對于另一個長度屬性的長度。相對長度單位在不同渲染介質之間縮放表現得更好。

單位	描述	TIY
em	相對于元素的字體大小（font-size）（2em 表示當前字體大小的 2 倍）	試一試
ex	相對于當前字體的 x-height(極少使用)	試一試
ch	相對于 "0"（零）的寬度	試一試
rem	相對于根元素的字體大小（font-size）	試一試
vw	相對于視口*寬度的 1%	試一試
vh	相對于視口*高度的 1%	試一試
vmin	相對于視口*較小尺寸的 1％	試一試
vmax	相對于視口*較大尺寸的 1％	試一試
%	相對于父元素	試一試

提示：em 和 rem 單元可用于創建完美的可擴展布局！

* 視口（Viewport）= 瀏覽器窗口的尺寸。如果視口寬 50 里面，則 1vw = 0.5cm。

表格中的數字注明了完全支持該長度單位的首個瀏覽器版本。