【css】長度單位小知識

02-04

CSS中有不少屬性是以長度作為值的。盒模型的屬性就是一些很明顯的值屬性：width、height、margin、padding、border。除此之外還有很多其他的CSS屬性的值同樣也是長度值，像偏移量(offset)、box-shadow的大小或者字體的大小、間距等。CSS中有哪些長度單位可以作為屬性的值呢？這樣的單位有很多。著作權歸作者所有。

絕對長度單位

px：像素或許被認為是最好的"設備像素"，但是像素長度和你在顯示器看到的文字屏幕像素無關。px實際上是一個按角度度量的單位。

in：英寸物理度量單位 1in = 96px；
cm：厘米物理度量單位 1cm = 37.8px；
mm：毫米物理度量單位 1mm = 0.1cm = 3.78px；

相對字體長度

em：相對單位，期初排版度量時是基於當前字體大寫字母"M"的尺寸的。當改變font-family時，它的尺寸不會發生改變，但在改變font-size的大小時，它的尺寸就會發生改變。 1em = 16px = 0.17in = 12pt = 1pc = 4.2mm = 0.42cm(沒有任何css規則前提)，但是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：rem和em一樣都是相對單位，但是和em不同的是，rem是相對根元素（root{}），而不是像em使用級聯的方式計算，rem相對使用起來比較簡單。但是有一點必須注意，瀏覽器支持問題。

points：物理度量單位 1pt = 1/72in;
pica: 物理度量單位 1pc = 12pt = 1/6in;
ex:是一個基於當前字體的x字母高度度量的。ex度量時有時候根據字體自身的信息，有時候由瀏覽器指明是通過一個小寫字形來度量，最糟糕的情況是，它被設置成0.5em。它之所以被命名為「x」的高度，是因為是基於x字母的高度的。要理解x-height，想像一個小寫字母，比如「d」，它會有一部分翹起，x-height是不包括翹起的這一部分的，它的高度是那個字母最下面的那一部分。和em不同，當改變font-family時em不會改變，而ex單位會變化，因為一個單位的值和那個字體是特殊的約束關係。
ch: ch的內涵和x高度相似，只是ch是基於字元0的寬度的而不是基於字元x高度的。當font-family改變的時候ch也會隨著改變。值得注意的瀏覽器支持問題。

可視區百分比長度單位

vw：vw可視區寬度單位，1vw等於可視區寬度的百分之一。vw單位跟百分比很相似，不同的是vw的值對所有的元素都一樣，與他們父元素或父元素的寬度無關。有點像rem單位那樣總是相對於根元素。著作權歸作者所有。
vh：vh和vw（viewport widht）單位一樣，不同的是vh是相對於可視區的高度著作權歸作者所有。
vmin:vmin的值是當前vw和vh中較小的值。在標準尺寸類型的使用實例中，和由自己確定屏幕大小的vw、vh單位相比，vmin是一個更有用的度量標準。著作權歸作者所有。
vmax:Vmax的值是vw和vh中的較大的值。

離奇的長度單位

百分比：以百分比為單位的長度值是基於具有相同屬性的父元素的長度值。例如，如果一個元素呈現的寬度是450px，子元素的寬度設為50%，那麼子元素呈現的寬度為225px。雜言：百分比不是一個專門的長度單位，我把它也包括在本文中是因為百分比和長度關係很大。