很多CSS屬性（如外邊距）都依賴于長(zhǎng)度度量來(lái)適當(dāng)?shù)仫@示各種頁(yè)面元素。因此，CSS 中有很多度量長(zhǎng)度的方法不足為奇。
所有長(zhǎng)度單位都可以表示為正數(shù)或負(fù)數(shù)，其后跟有一個(gè)標(biāo)簽（不過(guò)有些屬性只接受正數(shù)）。另外還可以使用實(shí)數(shù)，也就是有小數(shù)部分的數(shù)，如10.5或4.561。所有長(zhǎng)度單位后面都有一個(gè)兩字母縮寫(xiě)，它表示所指定的具體長(zhǎng)度單位，如in (英寸）或pt (點(diǎn)）。這個(gè)規(guī)則只有一個(gè)例外，這就是長(zhǎng)度為0（零）時(shí)，其后不需要跟單位。
這些長(zhǎng)度單位可以劃歸為兩類：絕對(duì)長(zhǎng)度單位和相對(duì)長(zhǎng)度單位。
絕對(duì)長(zhǎng)度單位
首先來(lái)介紹絕對(duì)長(zhǎng)度單位，因?yàn)樗鼈冏钊菀桌斫猓ūM管在Web設(shè)計(jì)中幾乎很少使用絕對(duì)長(zhǎng)度單位）。有5種絕對(duì)長(zhǎng)度單位，如下：
英寸<in>
可以想見(jiàn)，這種記法是指美國(guó)尺子上都有的單位：英寸（在全世界都使用米制體系的今天，規(guī)范中居然還有這個(gè)單位，這是一個(gè)很有意思的現(xiàn)象，由此可以看出美國(guó)對(duì)Internet的影響之大，不過(guò)現(xiàn)在還是不要介入這些社會(huì)問(wèn)題吧）。
厘米（cm）
這是指全世界尺子上都有的單位：厘米。1英寸是2.54厘米，1厘米等于0.394英寸。
毫米（mm）
對(duì)于不想用米制的美國(guó)人來(lái)說(shuō)，10毫米等于1厘米，所以1英寸等于25.4毫米，1 毫米等于0.0394英寸。
點(diǎn)（Pt）
點(diǎn)是一個(gè)標(biāo)準(zhǔn)印刷度量單位，在打印機(jī)和打字機(jī)上已經(jīng)使用了數(shù)十年，另外字處理程序使用點(diǎn)作為度量單位也有很多年了。以往，一英寸是72點(diǎn)（點(diǎn)是米制體系廣泛使用之前定義的）。因此，如果文本的首字母設(shè)置為12點(diǎn)，這就是1英寸的1/6高。例如，p{ font-size: 18pt;}等價(jià)于p{font-size: 0.25in;}。
派卡（pc）
派卡（Pica）也是一個(gè)印刷術(shù)語(yǔ)。1派卡相當(dāng)于12點(diǎn)，這意味著，6派卡等于1英寸。如上所示，如果文本的首字母設(shè)置為1派卡，這應(yīng)當(dāng)是1英寸的1/6高。例如，對(duì)于前面定義點(diǎn)時(shí)給出的示例聲明，p{font-size: 1.5pc;}會(huì)把文本設(shè)置為與上例大小相同。
可以想見(jiàn)，這種記法是指美國(guó)尺子上都有的單位：英寸（在全世界都使用米制體系的今天，規(guī)范中居然還有這個(gè)單位，這是一個(gè)很有意思的現(xiàn)象，由此可以看出美國(guó)對(duì)Internet的影響之大，不過(guò)現(xiàn)在還是不要介入這些社會(huì)問(wèn)題吧）。
厘米（cm）
這是指全世界尺子上都有的單位：厘米。1英寸是2.54厘米，1厘米等于0.394英寸。
毫米（mm）
對(duì)于不想用米制的美國(guó)人來(lái)說(shuō)，10毫米等于1厘米，所以1英寸等于25.4毫米，1 毫米等于0.0394英寸。
點(diǎn)（Pt）
點(diǎn)是一個(gè)標(biāo)準(zhǔn)印刷度量單位，在打印機(jī)和打字機(jī)上已經(jīng)使用了數(shù)十年，另外字處理程序使用點(diǎn)作為度量單位也有很多年了。以往，一英寸是72點(diǎn)（點(diǎn)是米制體系廣泛使用之前定義的）。因此，如果文本的首字母設(shè)置為12點(diǎn)，這就是1英寸的1/6高。例如，p{ font-size: 18pt;}等價(jià)于p{font-size: 0.25in;}。
派卡（pc）
派卡（Pica）也是一個(gè)印刷術(shù)語(yǔ)。1派卡相當(dāng)于12點(diǎn)，這意味著，6派卡等于1英寸。如上所示，如果文本的首字母設(shè)置為1派卡，這應(yīng)當(dāng)是1英寸的1/6高。例如，對(duì)于前面定義點(diǎn)時(shí)給出的示例聲明，p{font-size: 1.5pc;}會(huì)把文本設(shè)置為與上例大小相同。
當(dāng)然，只有當(dāng)瀏覽器知道用來(lái)顯示頁(yè)面的顯示器，所用的打印機(jī)或其他任何用戶代理的所有細(xì)節(jié)時(shí)，這些單位才真正有用。在一個(gè)Web瀏覽器上，顯示會(huì)受顯示器的尺寸影響，另外所設(shè)置的顯示器分辨率也會(huì)有影響——作為創(chuàng)作人員，對(duì)于這些因素你往往無(wú)計(jì)可施。你只能希望（如果沒(méi)有別的想法）這些度量相互之間要一致，也就是說(shuō)，設(shè)置為1.0in將是0.5in的兩倍大。
處理絕對(duì)長(zhǎng)度
如果一個(gè)顯示器的分辨率設(shè)置為1,024像素X768像素，其屏幕大小為14.22英寸寬、10.67英寸高，而且顯示區(qū)完全覆蓋整個(gè)屏幕，那么每個(gè)像素的寬和高都為1英寸的1/72?？梢灶A(yù)料，這種情況非常非常少見(jiàn)（你見(jiàn)過(guò)哪個(gè)顯示器的大小是這樣的？）。所以，在大多數(shù)顯示器上，每英寸的實(shí)際像素?cái)?shù)（ppi）都高干72，有時(shí)還會(huì)高很多，達(dá)到120ppi 甚至更高。
作為一個(gè)Windows用戶，你可以設(shè)置顯示驅(qū)動(dòng)程序，使元素的顯示完全對(duì)應(yīng)于實(shí)際度量?？梢栽囈幌?，單擊開(kāi)始一設(shè)置一控制面板。在控制面板中雙擊“顯示”，單擊“設(shè)置”頁(yè)，再單擊“高級(jí)”，可以看到一個(gè)對(duì)話框（不同PC上的對(duì)話框可能不同）。應(yīng)該能看到標(biāo)有“字體大小”的一部分，選擇“其他”，然后拿把尺子貼到屏幕上，移動(dòng)滾動(dòng)條，直到屏幕上的尺子與真正的尺子完全一致。單擊OK按鈕，退出對(duì)話框，設(shè)置完成。
如果你使用的是一個(gè)Mac Classic操作系統(tǒng)，那么在操作系統(tǒng)中無(wú)法設(shè)置這個(gè)信息，Mac Classic OS (即OS X之前的所有版本）對(duì)于屏幕上像素和絕對(duì)度量之間的關(guān)系有一個(gè)假設(shè)，它聲明顯示器每英寸有72像素。這個(gè)假設(shè)完全是錯(cuò)誤的，不過(guò)它內(nèi)置在操作系統(tǒng)中，因此無(wú)法避免。所以，在許多基于Classic Mac的Web瀏覽器上，點(diǎn)值是多少，相應(yīng)的像素值就是多少：24pt文本就是24像素高，8pt文本則是8像素高。遺憾的是，這實(shí)在太小了，以至于往往看不到。圖4-4展示了這個(gè)問(wèn)題。
在OS X中，內(nèi)置的假設(shè)ppi值與Windows的內(nèi)置值很接近：96ppi。這也不見(jiàn)得有多正確，不過(guò)至少與Windows計(jì)算機(jī)一致。
Classic Mac顯示問(wèn)題作為一個(gè)例子很好地說(shuō)明了設(shè)置Web頁(yè)面時(shí)為什么要避免使用點(diǎn)。在瀏覽器顯示方面，em、百分?jǐn)?shù)甚至像素都比點(diǎn)要好。
注意：從面向Macintosh的Internet Explorer 5和基于Gecko的瀏覽器（如Netscape 6+）開(kāi)始，瀏覽器本身包含了一個(gè)首選項(xiàng)設(shè)置來(lái)設(shè)置ppi值，可以選擇標(biāo)準(zhǔn)Macintosh分辨率72ppi,常用的Windows分辨率96ppi,或者是適合你的顯示器的ppi分辨率。最后這種選擇類似干前面介紹的Windows設(shè)置，也就是用一個(gè)滑動(dòng)尺與真正的尺子比較，從而使顯示器與真實(shí)世界中的實(shí)際距離完全一致。
暫不考慮我們看到的，下面做一個(gè)可能性不大的假設(shè)，假設(shè)你的計(jì)算機(jī)相當(dāng)了解其顯示系統(tǒng)，可以準(zhǔn)確地再現(xiàn)真實(shí)世界的度量。在這種情況下，通過(guò)聲明p{margin-top: 0.5in;}可以確信每個(gè)段落的上邊距都是半英寸。不論字體大小，也不管任何其他情況，段落的上邊距都是半英寸。
絕對(duì)單位在定義打印文檔的樣式表時(shí)更為有用，在此通常會(huì)以英寸、點(diǎn)和派卡來(lái)度量長(zhǎng)度?？梢钥吹?，在Web設(shè)計(jì)中試圖使用絕對(duì)度量往往不是最佳的做法，所以下面來(lái)看一些更有用的度量單位。
相對(duì)長(zhǎng)度單位
相對(duì)單位之所以得名，是因?yàn)樗鼈兪歉鶕?jù)與其他事物的關(guān)系來(lái)度量的。所度量的實(shí)際(或絕對(duì)）距離可能因?yàn)椴辉谄淇刂浦碌钠渌蛩囟淖?，如屏幕分辨率、可視區(qū)的寬度、用戶的首選項(xiàng)設(shè)置，以及很多其他方面。另外，對(duì)于某些相對(duì)單位，其大小幾乎總是對(duì)應(yīng)于使用該單位的元素，因此會(huì)因元素的不同而不同。
共有3種相對(duì)長(zhǎng)度單位：em、ex和px。前兩個(gè)單位代表“em-height”和“x-height”，這是常用的印刷度量單位，不過(guò)，如果你很熟悉印刷術(shù)語(yǔ)，會(huì)發(fā)現(xiàn)在CSS中它們有另外的含義。最后一種長(zhǎng)度單位是px,這代表“像素”。如果仔細(xì)査看屏幕，一個(gè)像素就是你在計(jì)算機(jī)顯示器上看到的一個(gè)點(diǎn)。這個(gè)值被定義為相對(duì)單位，因?yàn)樗Q于顯示設(shè)備的分辨率，稍后將介紹這個(gè)內(nèi)容。
em和ex單位
首先我們來(lái)考慮em和ex。在CSS中，1個(gè)“em”定義為一種給定字體的font-size 值。如果一個(gè)元素的font-size為14像素，那么對(duì)于該元素，1em就等于14像素。
顯然，這個(gè)值可能隨元素的不同而不同。例如，假設(shè)一個(gè)h1的字體大小為24像素，一個(gè)h2元素的字體大小為18像素，還有一個(gè)段落的字體大小為12像素。如果將所有這三個(gè)元素的左邊距都設(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è)置字體的大小時(shí)，em的值會(huì)相對(duì)于父元素的字體大小改變。
與此不同，ex是指所用字體中小寫(xiě)x的高度。因此，如果有兩個(gè)段落，其中文本的大小為24點(diǎn)，但是各段使用了不同的字體，那么各段相應(yīng)的ex值可能不同。這是因?yàn)?，不同字體中x的高度可能不同，如圖4-6所示。盡管這些例子的文本都使用了24點(diǎn)——相應(yīng)地它們的em值都是24點(diǎn)——但是x的高度卻各不相同。
em和ex的實(shí)際問(wèn)題
當(dāng)然，上述所有解釋都只是理論上的。前面只是指出了可能會(huì)發(fā)生什么，但是在實(shí)際中，很多用戶代理的做法是：取em的值，再取其一半作為ex值。為什么呢？顯然，大多數(shù)字體都沒(méi)有內(nèi)置ex高度值，而且計(jì)算這個(gè)值相當(dāng)困難。由于大多數(shù)字體的小寫(xiě)字母都是相應(yīng)大寫(xiě)字母高度的一半，所以可以方便地假設(shè)1ex等于0.5em。
一些瀏覽器（包括面向Mac的Internet Explorer 5）會(huì)在內(nèi)部顯示一個(gè)小寫(xiě)的x，并計(jì)算相應(yīng)的像素值來(lái)確定其高度與此字符font-size值之比，從而試圖確定給定字體的x高度。這不是一個(gè)最佳的方法，但是這比簡(jiǎn)單地假設(shè)lex等于0.5em好多了。作為使用CSS的人來(lái)說(shuō)，我們可以相信，隨著時(shí)間的推移，更多的用戶代理都會(huì)開(kāi)始使用ex 的實(shí)際值，那種取em的一半作為ex的簡(jiǎn)便做法會(huì)逐漸淡出歷史。
像素長(zhǎng)度
從表面來(lái)看，像素很直接。如果仔細(xì)地查看一個(gè)顯示器，你會(huì)看到，它被劃分成一個(gè)由小框組成的網(wǎng)格。每個(gè)框就是一個(gè)像素。如果將一個(gè)元素的高和寬定義為某個(gè)像素?cái)?shù)，如以下標(biāo)記所示：
遺憾的是，使用像素有一個(gè)潛在的缺點(diǎn)。如果按像素設(shè)置字體大小，那么Windows平臺(tái)Internet Explorer (IE7之前）的用戶將無(wú)法使用其瀏覽器中的“文本大小”菜單調(diào)整文本的大小。如果文本太小，用戶無(wú)法很好地閱讀，這可能就存在問(wèn)題了。如果使用更靈活的度量，如em，用戶就能調(diào)整文本的大?。ㄈ绻氵^(guò)于保護(hù)你的設(shè)計(jì)，當(dāng)然也可以說(shuō)這才是一個(gè)缺點(diǎn)）。
另一方面，非常適合用像素來(lái)度量圖像大小，因?yàn)閳D像的高度和寬度本身就是像素?cái)?shù)。實(shí)際上，只有一種情況下你可能不想用像素來(lái)表示圖像大小，這就是在你希望圖像能隨文本的大小縮放時(shí)。這是一種不錯(cuò)的辦法，有時(shí)也很有用，如果你用的是基于向量的圖像而不是基于像素的圖像，就很適合采用這種辦法[由于采用了可縮放向量圖形（Scalable Vector Graph1cs），將來(lái)在這方面還會(huì)有更多內(nèi)容。
像素理論
那么為什么像素定義為相對(duì)長(zhǎng)度呢？我已經(jīng)解釋過(guò)，顯示器上的小色框是像素。不過(guò)，多少個(gè)這樣的色框等于一英寸呢？這個(gè)問(wèn)題看上去可能不合邏輯，不過(guò)暫容我來(lái)解釋。
在討論像素時(shí)，CSS規(guī)范建議如果一個(gè)顯示類型的設(shè)置與96ppi截然不同，用戶代理應(yīng)當(dāng)把像素度量縮放為一種“參考像素”。CSS2建議將90ppi作為參考像素，不過(guò)CSS2.1 則建議采用96ppi，這是Windows機(jī)器常用的度量，而且也被諸如Safari等現(xiàn)代Macintosh 瀏覽器所采納。
一般來(lái)講，如果你做了如下聲明：font-size: 18px, Web瀏覽器幾乎總會(huì)在顯示器上使用實(shí)際像素——畢竟，顯示器上已經(jīng)有像素——不過(guò)，如果采用其他顯示設(shè)備（如打印機(jī)用戶代理就必須將像素長(zhǎng)度重新縮放為更合理的度量。換句話說(shuō)，打印代碼必須確定一個(gè)像素有多少個(gè)點(diǎn)，為此，它可能要使用96ppi參考像素。
警告：關(guān)于像素度量存在一些問(wèn)題，在較早的CSS1實(shí)現(xiàn)中就可以看到這些問(wèn)題的一個(gè)例子。在 Internet Explorer 3.x中，當(dāng)打印一個(gè)文檔時(shí)，IE3認(rèn)為18px就等于18點(diǎn)，而在一個(gè)600dpi 的打印機(jī)上，則是一英寸的18/600或3/100 —如果愿意也可以記為。03in。這樣的文本實(shí)在太小了！
由于可能會(huì)進(jìn)行這樣的重新縮放，像素被定義為一種相對(duì)度量單位，盡管在Web設(shè)計(jì)中像素表現(xiàn)得很像是絕對(duì)單位。
如何取舍？
根據(jù)上述所有問(wèn)題，最好的度量可能是相對(duì)度量，特別是em，如果合適也可以使用px。在大多數(shù)當(dāng)前使用的瀏覽器中，由于ex實(shí)際上是em的一部分（0.5em），所以對(duì)目前來(lái)說(shuō)ex還不太有用。如果更多的用戶代理支持實(shí)際的x高度度量，ex可能就會(huì)有其用武之地了。總地來(lái)說(shuō)，em是最靈活的，因?yàn)樗S字體大小縮放，所以元素和元素操作都能更為一致。
對(duì)于元素的其他方面，可能更適合使用像素，如元素的邊框或定位。這完全由具體情況而定。例如，在原先使用空格GIF來(lái)分隔各部分的設(shè)計(jì)中，如果邊距使用像素長(zhǎng)度，會(huì)得到一種等間距的效果。將這個(gè)間距轉(zhuǎn)換為em，會(huì)使得設(shè)計(jì)隨文本大小的變化而擴(kuò)大或收縮，這可能很好，也可能并不是件好事。