很多CSS屬性（如外邊距）都依賴于長度度量來適當?shù)仫@示各種頁面元素。因此，CSS 中有很多度量長度的方法不足為奇。

所有長度單位都可以表示為正數(shù)或負數(shù)，其后跟有一個標簽（不過有些屬性只接受正數(shù)）。另外還可以使用實數(shù)，也就是有小數(shù)部分的數(shù)，如10.5或4.561。所有長度單位后面都有一個兩字母縮寫，它表示所指定的具體長度單位，如in (英寸）或pt (點）。這個規(guī)則只有一個例外，這就是長度為0（零）時，其后不需要跟單位。

這些長度單位可以劃歸為兩類：絕對長度單位和相對長度單位。

絕對長度單位

首先來介紹絕對長度單位，因為它們最容易理解（盡管在Web設(shè)計中幾乎很少使用絕對長度單位）。有5種絕對長度單位，如下：

英寸<in>

可以想見，這種記法是指美國尺子上都有的單位：英寸（在全世界都使用米制體系的今天，規(guī)范中居然還有這個單位，這是一個很有意思的現(xiàn)象，由此可以看出美國對Internet的影響之大，不過現(xiàn)在還是不要介入這些社會問題吧）。

厘米（cm）

這是指全世界尺子上都有的單位：厘米。1英寸是2.54厘米，1厘米等于0.394英寸。

毫米（mm）

對于不想用米制的美國人來說，10毫米等于1厘米，所以1英寸等于25.4毫米，1 毫米等于0.0394英寸。

點（Pt）

點是一個標準印刷度量單位，在打印機和打字機上已經(jīng)使用了數(shù)十年，另外字處理程序使用點作為度量單位也有很多年了。以往，一英寸是72點（點是米制體系廣泛使用之前定義的）。因此，如果文本的首字母設(shè)置為12點，這就是1英寸的1/6高。例如，p{ font-size: 18pt;}等價于p{font-size: 0.25in;}。

派卡（pc）

派卡（Pica）也是一個印刷術(shù)語。1派卡相當于12點，這意味著，6派卡等于1英寸。如上所示，如果文本的首字母設(shè)置為1派卡，這應(yīng)當是1英寸的1/6高。例如，對于前面定義點時給出的示例聲明，p{font-size: 1.5pc;}會把文本設(shè)置為與上例大小相同。

可以想見，這種記法是指美國尺子上都有的單位：英寸（在全世界都使用米制體系的今天，規(guī)范中居然還有這個單位，這是一個很有意思的現(xiàn)象，由此可以看出美國對Internet的影響之大，不過現(xiàn)在還是不要介入這些社會問題吧）。

厘米（cm）

這是指全世界尺子上都有的單位：厘米。1英寸是2.54厘米，1厘米等于0.394英寸。

毫米（mm）

對于不想用米制的美國人來說，10毫米等于1厘米，所以1英寸等于25.4毫米，1 毫米等于0.0394英寸。

點（Pt）

點是一個標準印刷度量單位，在打印機和打字機上已經(jīng)使用了數(shù)十年，另外字處理程序使用點作為度量單位也有很多年了。以往，一英寸是72點（點是米制體系廣泛使用之前定義的）。因此，如果文本的首字母設(shè)置為12點，這就是1英寸的1/6高。例如，p{ font-size: 18pt;}等價于p{font-size: 0.25in;}。

派卡（pc）

派卡（Pica）也是一個印刷術(shù)語。1派卡相當于12點，這意味著，6派卡等于1英寸。如上所示，如果文本的首字母設(shè)置為1派卡，這應(yīng)當是1英寸的1/6高。例如，對于前面定義點時給出的示例聲明，p{font-size: 1.5pc;}會把文本設(shè)置為與上例大小相同。

當然，只有當瀏覽器知道用來顯示頁面的顯示器，所用的打印機或其他任何用戶代理的所有細節(jié)時，這些單位才真正有用。在一個Web瀏覽器上，顯示會受顯示器的尺寸影響，另外所設(shè)置的顯示器分辨率也會有影響——作為創(chuàng)作人員，對于這些因素你往往無計可施。你只能希望（如果沒有別的想法）這些度量相互之間要一致，也就是說，設(shè)置為1.0in將是0.5in的兩倍大。

處理絕對長度

如果一個顯示器的分辨率設(shè)置為1,024像素X768像素，其屏幕大小為14.22英寸寬、10.67英寸高，而且顯示區(qū)完全覆蓋整個屏幕，那么每個像素的寬和高都為1英寸的1/72?？梢灶A(yù)料，這種情況非常非常少見（你見過哪個顯示器的大小是這樣的？）。所以，在大多數(shù)顯示器上，每英寸的實際像素數(shù)（ppi）都高干72，有時還會高很多，達到120ppi 甚至更高。

作為一個Windows用戶，你可以設(shè)置顯示驅(qū)動程序，使元素的顯示完全對應(yīng)于實際度量?？梢栽囈幌?，單擊開始一設(shè)置一控制面板。在控制面板中雙擊“顯示”，單擊“設(shè)置”頁，再單擊“高級”，可以看到一個對話框（不同PC上的對話框可能不同）。應(yīng)該能看到標有“字體大小”的一部分，選擇“其他”，然后拿把尺子貼到屏幕上，移動滾動條，直到屏幕上的尺子與真正的尺子完全一致。單擊OK按鈕，退出對話框，設(shè)置完成。

如果你使用的是一個Mac Classic操作系統(tǒng)，那么在操作系統(tǒng)中無法設(shè)置這個信息，Mac Classic OS (即OS X之前的所有版本）對于屏幕上像素和絕對度量之間的關(guān)系有一個假設(shè)，它聲明顯示器每英寸有72像素。這個假設(shè)完全是錯誤的，不過它內(nèi)置在操作系統(tǒng)中，因此無法避免。所以，在許多基于Classic Mac的Web瀏覽器上，點值是多少，相應(yīng)的像素值就是多少：24pt文本就是24像素高，8pt文本則是8像素高。遺憾的是，這實在太小了，以至于往往看不到。圖4-4展示了這個問題。

在OS X中，內(nèi)置的假設(shè)ppi值與Windows的內(nèi)置值很接近：96ppi。這也不見得有多正確，不過至少與Windows計算機一致。

Classic Mac顯示問題作為一個例子很好地說明了設(shè)置Web頁面時為什么要避免使用點。在瀏覽器顯示方面，em、百分數(shù)甚至像素都比點要好。

注意：從面向Macintosh的Internet Explorer 5和基于Gecko的瀏覽器（如Netscape 6+）開始，瀏覽器本身包含了一個首選項設(shè)置來設(shè)置ppi值，可以選擇標準Macintosh分辨率72ppi,常用的Windows分辨率96ppi,或者是適合你的顯示器的ppi分辨率。最后這種選擇類似干前面介紹的Windows設(shè)置，也就是用一個滑動尺與真正的尺子比較，從而使顯示器與真實世界中的實際距離完全一致。

暫不考慮我們看到的，下面做一個可能性不大的假設(shè)，假設(shè)你的計算機相當了解其顯示系統(tǒng)，可以準確地再現(xiàn)真實世界的度量。在這種情況下，通過聲明p{margin-top: 0.5in;}可以確信每個段落的上邊距都是半英寸。不論字體大小，也不管任何其他情況，段落的上邊距都是半英寸。

絕對單位在定義打印文檔的樣式表時更為有用，在此通常會以英寸、點和派卡來度量長度?？梢钥吹剑赪eb設(shè)計中試圖使用絕對度量往往不是最佳的做法，所以下面來看一些更有用的度量單位。

相對長度單位

相對單位之所以得名，是因為它們是根據(jù)與其他事物的關(guān)系來度量的。所度量的實際(或絕對）距離可能因為不在其控制之下的其他因素而改變，如屏幕分辨率、可視區(qū)的寬度、用戶的首選項設(shè)置，以及很多其他方面。另外，對于某些相對單位，其大小幾乎總是對應(yīng)于使用該單位的元素，因此會因元素的不同而不同。

共有3種相對長度單位：em、ex和px。前兩個單位代表“em-height”和“x-height”，這是常用的印刷度量單位，不過，如果你很熟悉印刷術(shù)語，會發(fā)現(xiàn)在CSS中它們有另外的含義。最后一種長度單位是px,這代表“像素”。如果仔細査看屏幕，一個像素就是你在計算機顯示器上看到的一個點。這個值被定義為相對單位，因為它取決于顯示設(shè)備的分辨率，稍后將介紹這個內(nèi)容。

em和ex單位

首先我們來考慮em和ex。在CSS中，1個“em”定義為一種給定字體的font-size 值。如果一個元素的font-size為14像素，那么對于該元素，1em就等于14像素。

顯然，這個值可能隨元素的不同而不同。例如，假設(shè)一個h1的字體大小為24像素，一個h2元素的字體大小為18像素，還有一個段落的字體大小為12像素。如果將所有這三個元素的左邊距都設(shè)置為1em，那么它們的左邊距就分別為24像素、18像素和12像素：

h1 {font-size: 24px;}

h2 {font-size: 18px;}

p {font-size: 12px;}

h1, h2, p {margin-left: 1em;}

small {font-size: 0.8em;}

<h1>Left margin =<small>24 pixels</small></h1>

<h2>Left margin =<small>18 pixels</small></h2>

<p>Left margin =<small>12 pixels</small></p>

另一方面，在設(shè)置字體的大小時，em的值會相對于父元素的字體大小改變。

與此不同，ex是指所用字體中小寫x的高度。因此，如果有兩個段落，其中文本的大小為24點，但是各段使用了不同的字體，那么各段相應(yīng)的ex值可能不同。這是因為，不同字體中x的高度可能不同，如圖4-6所示。盡管這些例子的文本都使用了24點——相應(yīng)地它們的em值都是24點——但是x的高度卻各不相同。

em和ex的實際問題

當然，上述所有解釋都只是理論上的。前面只是指出了可能會發(fā)生什么，但是在實際中，很多用戶代理的做法是：取em的值，再取其一半作為ex值。為什么呢？顯然，大多數(shù)字體都沒有內(nèi)置ex高度值，而且計算這個值相當困難。由于大多數(shù)字體的小寫字母都是相應(yīng)大寫字母高度的一半，所以可以方便地假設(shè)1ex等于0.5em。

一些瀏覽器（包括面向Mac的Internet Explorer 5）會在內(nèi)部顯示一個小寫的x，并計算相應(yīng)的像素值來確定其高度與此字符font-size值之比，從而試圖確定給定字體的x高度。這不是一個最佳的方法，但是這比簡單地假設(shè)lex等于0.5em好多了。作為使用CSS的人來說，我們可以相信，隨著時間的推移，更多的用戶代理都會開始使用ex 的實際值，那種取em的一半作為ex的簡便做法會逐漸淡出歷史。

像素長度

從表面來看，像素很直接。如果仔細地查看一個顯示器，你會看到，它被劃分成一個由小框組成的網(wǎng)格。每個框就是一個像素。如果將一個元素的高和寬定義為某個像素數(shù)，如以下標記所示：

遺憾的是，使用像素有一個潛在的缺點。如果按像素設(shè)置字體大小，那么Windows平臺Internet Explorer (IE7之前）的用戶將無法使用其瀏覽器中的“文本大小”菜單調(diào)整文本的大小。如果文本太小，用戶無法很好地閱讀，這可能就存在問題了。如果使用更靈活的度量，如em，用戶就能調(diào)整文本的大小（如果你過于保護你的設(shè)計，當然也可以說這才是一個缺點）。

另一方面，非常適合用像素來度量圖像大小，因為圖像的高度和寬度本身就是像素數(shù)。實際上，只有一種情況下你可能不想用像素來表示圖像大小，這就是在你希望圖像能隨文本的大小縮放時。這是一種不錯的辦法，有時也很有用，如果你用的是基于向量的圖像而不是基于像素的圖像，就很適合采用這種辦法[由于采用了可縮放向量圖形（Scalable Vector Graph1cs），將來在這方面還會有更多內(nèi)容。

像素理論

那么為什么像素定義為相對長度呢？我已經(jīng)解釋過，顯示器上的小色框是像素。不過，多少個這樣的色框等于一英寸呢？這個問題看上去可能不合邏輯，不過暫容我來解釋。

在討論像素時，CSS規(guī)范建議如果一個顯示類型的設(shè)置與96ppi截然不同，用戶代理應(yīng)當把像素度量縮放為一種“參考像素”。CSS2建議將90ppi作為參考像素，不過CSS2.1 則建議采用96ppi，這是Windows機器常用的度量，而且也被諸如Safari等現(xiàn)代Macintosh 瀏覽器所采納。

一般來講，如果你做了如下聲明：font-size: 18px, Web瀏覽器幾乎總會在顯示器上使用實際像素——畢竟，顯示器上已經(jīng)有像素——不過，如果采用其他顯示設(shè)備（如打印機用戶代理就必須將像素長度重新縮放為更合理的度量。換句話說，打印代碼必須確定一個像素有多少個點，為此，它可能要使用96ppi參考像素。

警告：關(guān)于像素度量存在一些問題，在較早的CSS1實現(xiàn)中就可以看到這些問題的一個例子。在 Internet Explorer 3.x中，當打印一個文檔時，IE3認為18px就等于18點，而在一個600dpi 的打印機上，則是一英寸的18/600或3/100 —如果愿意也可以記為。03in。這樣的文本實在太小了！

由于可能會進行這樣的重新縮放，像素被定義為一種相對度量單位，盡管在Web設(shè)計中像素表現(xiàn)得很像是絕對單位。

如何取舍？

根據(jù)上述所有問題，最好的度量可能是相對度量，特別是em，如果合適也可以使用px。在大多數(shù)當前使用的瀏覽器中，由于ex實際上是em的一部分（0.5em），所以對目前來說ex還不太有用。如果更多的用戶代理支持實際的x高度度量，ex可能就會有其用武之地了?？偟貋碚f，em是最靈活的，因為它隨字體大小縮放，所以元素和元素操作都能更為一致。

對于元素的其他方面，可能更適合使用像素，如元素的邊框或定位。這完全由具體情況而定。例如，在原先使用空格GIF來分隔各部分的設(shè)計中，如果邊距使用像素長度，會得到一種等間距的效果。將這個間距轉(zhuǎn)換為em，會使得設(shè)計隨文本大小的變化而擴大或收縮，這可能很好，也可能并不是件好事。