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

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

這些長(zhǎng)度單位可以劃歸為兩類：絕對(duì)長(zhǎng)度單位和相對(duì)長(zhǎng)度單位。

絕對(duì)長(zhǎng)度單位

首先來介紹絕對(duì)長(zhǎng)度單位，因?yàn)樗鼈冏钊菀桌斫猓ūM管在Web設(shè)計(jì)中幾乎很少使用絕對(duì)長(zhǎng)度單位）。有5種絕對(duì)長(zhǎng)度單位，如下：

英寸<in>

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

厘米（cm）

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

毫米（mm）

對(duì)于不想用米制的美國(guó)人來說，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ù)語。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è)置為與上例大小相同。

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

厘米（cm）

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

毫米（mm）

對(duì)于不想用米制的美國(guó)人來說，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ù)語。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)瀏覽器知道用來顯示頁(yè)面的顯示器，所用的打印機(jī)或其他任何用戶代理的所有細(xì)節(jié)時(shí)，這些單位才真正有用。在一個(gè)Web瀏覽器上，顯示會(huì)受顯示器的尺寸影響，另外所設(shè)置的顯示器分辨率也會(huì)有影響——作為創(chuàng)作人員，對(duì)于這些因素你往往無計(jì)可施。你只能希望（如果沒有別的想法）這些度量相互之間要一致，也就是說，設(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ù)料，這種情況非常非常少見（你見過哪個(gè)顯示器的大小是這樣的？）。所以，在大多數(shù)顯示器上，每英寸的實(shí)際像素?cái)?shù)（ppi）都高干72，有時(shí)還會(huì)高很多，達(dá)到120ppi 甚至更高。

作為一個(gè)Windows用戶，你可以設(shè)置顯示驅(qū)動(dòng)程序，使元素的顯示完全對(duì)應(yīng)于實(shí)際度量?？梢栽囈幌?，單擊開始一設(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)中無法設(shè)置這個(gè)信息，Mac Classic OS (即OS X之前的所有版本）對(duì)于屏幕上像素和絕對(duì)度量之間的關(guān)系有一個(gè)假設(shè)，它聲明顯示器每英寸有72像素。這個(gè)假設(shè)完全是錯(cuò)誤的，不過它內(nèi)置在操作系統(tǒng)中，因此無法避免。所以，在許多基于Classic Mac的Web瀏覽器上，點(diǎn)值是多少，相應(yīng)的像素值就是多少：24pt文本就是24像素高，8pt文本則是8像素高。遺憾的是，這實(shí)在太小了，以至于往往看不到。圖4-4展示了這個(gè)問題。

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

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

注意：從面向Macintosh的Internet Explorer 5和基于Gecko的瀏覽器（如Netscape 6+）開始，瀏覽器本身包含了一個(gè)首選項(xiàng)設(shè)置來設(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í)世界的度量。在這種情況下，通過聲明p{margin-top: 0.5in;}可以確信每個(gè)段落的上邊距都是半英寸。不論字體大小，也不管任何其他情況，段落的上邊距都是半英寸。

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

相對(duì)長(zhǎng)度單位

相對(duì)單位之所以得名，是因?yàn)樗鼈兪歉鶕?jù)與其他事物的關(guān)系來度量的。所度量的實(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”，這是常用的印刷度量單位，不過，如果你很熟悉印刷術(shù)語，會(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單位

首先我們來考慮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是指所用字體中小寫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í)際問題

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

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

像素長(zhǎng)度

從表面來看，像素很直接。如果仔細(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之前）的用戶將無法使用其瀏覽器中的“文本大小”菜單調(diào)整文本的大小。如果文本太小，用戶無法很好地閱讀，這可能就存在問題了。如果使用更靈活的度量，如em，用戶就能調(diào)整文本的大?。ㄈ绻氵^于保護(hù)你的設(shè)計(jì)，當(dāng)然也可以說這才是一個(gè)缺點(diǎn)）。

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

像素理論

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

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

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

警告：關(guān)于像素度量存在一些問題，在較早的CSS1實(shí)現(xià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ù)上述所有問題，最好的度量可能是相對(duì)度量，特別是em，如果合適也可以使用px。在大多數(shù)當(dāng)前使用的瀏覽器中，由于ex實(shí)際上是em的一部分（0.5em），所以對(duì)目前來說ex還不太有用。如果更多的用戶代理支持實(shí)際的x高度度量，ex可能就會(huì)有其用武之地了?？偟貋碚f，em是最靈活的，因?yàn)樗S字體大小縮放，所以元素和元素操作都能更為一致。

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