CSS中有不少屬性是以長度作為值的。盒模型的屬性就是一些很明顯的值屬性：width、height、margin、padding、border。除此之外還有很多其他的CSS屬性的值同樣也是長度值，像偏移量(offset)、box-shadow的大小或者字體的大小、間距等。CSS中有哪些長度單位可以作為屬性的值呢？這樣的單位有很多。
絕對長度單位
px
.wrap { width: 400px; }
像素或許被認為是最好的“設備像素”，而這種像素長度和你在顯示器上看到的文字屏幕像素無關。px實際上是一個按角度度量的單位。
像素應該是設備和顯示器中顯示趨於一致，但是他越來越不正確。比如：在迷你ipad上顯示的網站和ipad本身顯示的網頁是一樣的，意味着如果那些設置的像素值標准化后就超出了窗口的范圍
在web上，像素仍然是典型的度量單位，很多其他長度單位直接映射成像素，最終，他們被按照像素處理，javascript語言里的單位就是使用的像素。
in
.wrap { width: 4in; }
英寸是一個物理度量單位，但是在CSS領域，英寸只不過被直接映射成像素罷了。歡迎大家在評論中提供使用英寸做單位的實例，我會把這些實例添加到這里的，但是，到目前為止我還沒有見過哪個實例用的是英寸，當然也沒見過使用下面那些物理度量單位的實例。
1in == 96px
cm
.wrap { width: 20cm; }
對於世界上大多數的人來說，厘米是比較熟悉有用的物理度量單位。它也映射成像素
1cm == 37.8px
mm
.wrap { width: 200mm; }
毫米是個小數量級的物理度量單位。
1mm == 0.1cm == 3.78px
相對字體的長度
Em
.wrap { width: 40em; }
Em 是一個相對單位。起初排版度量時是基於當前字體大寫字母”M”的尺寸的。當改變font-family時，它的尺寸不會發生改變，但在改變font-size的大小時，它的尺寸就會發生變化。
在沒有任何CSS規則的前提下，1em的長度是：
1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
如果有任何CSS規則改變了字體大小（不管在文檔的什么位置），1em的長度會變成相對於新的font-size的大小。
em單位有點古怪，當設置了font-size屬性后，它會逐級向上相乘，所以如果一個設置了font-size:1.1em的元素在另一個設置了font-size:1.1em的元素里，而這個元素又在另一個設置了font-size:1.1em的元素里，那么最后計算的結果是1.1X1.1X1.1=1.331rem（根em）。這意味着即使一個元素設置為10em，這個元素也不會在他出現的每個地方都是10em。如果font-size變化了，它可能會寬點，也可能會窄點。
rem
.wrap { width: 40rem; }
Rem和em一樣也是一個相對單位，但是和em不同的是rem總是相對於根元素(如:root{})，而不像em一樣使用級聯的方式來計算尺寸。這種相對單位使用起來更簡單。
值得注意的瀏覽器支持問題： IE8，, Safari 4或 iOS 3.2中不支持rem單位。
points
.wrap { width: 120pt; }
Point是一個物理度量單位，1pt=1/72 in.在CSS之外point是最常用的尺寸類型（可能這就是css支持point的原因）。它在語言里也很常見“當然他們把這個重要的信息設置成了小八號字體”。
在打印樣式表和物理媒介中，point是最有意義的，當然你也可以用在屏幕媒介上使用，或者其他的地方
值得注意的瀏覽器支持問題：在屏幕呈現pt尺寸的時候，會有很大的不同，這里有個關於IE6和firefox（可能是3.6版本）的對比。
pica
.wrap { width: 12pc; }
Pica和points一樣，只不過1pc=12pt。
ex
.wrap { width: 60ex; }
ex是一個基於當前字體的x字母高度度量的。ex度量時有時候根據字體自身的信息，有時候由瀏覽器指明是通過一個小寫字形來度量，最糟糕的情況是，它被設置成0.5em。它之所以被命名為“x”的高度，是因為是基於x字母的高度的。要理解x-height，想象一個小寫字母，比如“d”，它會有一部分翹起，x-height是不包括翹起的這一部分的，它的高度是那個字母最下面的那一部分。
和em不同，當改變font-family時em不會改變，而ex單位會變化，因為一個單位的值和那個字體是特殊的約束關系。
ch
.wrap { width: 60ch; }
ch的內涵和x高度相似，只是ch是基於字符0的寬度的而不是基於字符x高度的。當font-family改變的時候ch也會隨着改變。
值得注意的瀏覽器支持問題：寫這篇文章的時候任何一個webkit內核的瀏覽器都不支持這個單位。
可視區百分比長度單位
vw
.wrap { width: 10vw; }
vw是可視區寬度單位。1vw等於可視區寬度的百分之一。vw單位跟百分比很相似，不同的是vw的值對所有的元素都一樣，與他們父元素或父元素的寬度無關。有點像rem單位那樣總是相對於根元素。
這里有一篇文章，里面主要的使用實例就是可視區百分比單位。
值得注意的瀏覽器支持問題：在移動瀏覽器中除了最新的iOS6支持這種單位外，其他的都不支持，這一點也適用於其他可視區相對長度單位。
vh
.wrap { width: 10vh; }
vh和vw（viewport widht）單位一樣，不同的是vh是相對於可視區的高度。
vmin
.wrap { width: 20vmin; }
vmin的值是當前vw和vh中較小的值。在標准尺寸類型的使用實例中，和由自己確定屏幕大小的vw、vh單位相比，vmin是一個更有用的度量標准。
vmax
.wrap { width: 20vmax; }
Vmax的值是vw和vh中的較大的值。
值得注意的瀏覽器支持問題：webkit內核的瀏覽器支持vmin，不支持vmax。但是Firefox支持vmax。
離奇的長度單位
百分比
.wrap { width: 50%; }
以百分比為單位的長度值是基於具有相同屬性的父元素的長度值。例如，如果一個元素呈現的寬度是450px，子元素的寬度設為50%，那么子元素呈現的寬度為225px。
雜言：百分比不是一個專門的長度單位，我把它也包括在本文中是因為百分比和長度關系很大。
著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
原文: https://www.w3cplus.com/css/the-lengths-of-css.html © w3cplus.com