在CSS樣式表中，我們經常會看到pt， px，em，ex ，in等這類長度單位。它們各是什麼意思，有什麼區別呢？
我又寫了另外一個HTML例子，測試一下cm。
在CSS樣式表中，長度單位分兩種：
相對長度單位，如px, em等
絕對長度單位，如pt,mm等
也談px和pt的區別
經常看 到有人拿px和pt比較，主要是為了爭辯在確定字型大小(font-size)或其它CSS屬性大小時，用什麼樣的CSS長度單位更加好。有人說，用pt更好，因為pt是絕對長度單位，不會因為螢幕解析度大小，或者其它因素而改變。
我去做了一個測試，寫了這樣一個HTML例子。代碼如下：
<html>
<head ><title >CSS單位長度區別 - px和pt的區別</title></head>
<body >
<p style = "font-size:20pt;">Font-size is 20pt</p>
<p style = "font-size:20px;">Font-size is 20px</p >
</body>
</html>
因為px能夠精確地表示元素在螢幕中的位置和大小，
我將我的顯示器分別調到1024*768和800*600的解析度(指screen resolution)。不管是用pt還 是用px設定的字型，都隨著解析度變化而變化 。(我使用的瀏覽器是IE6，其它瀏覽器上尚未測試過。)
所有的長度單位基於螢幕進行顯示的時候 ，都統一先換算成為像素的多少。
我又寫了另外一個HTML例子，測試一下cm(厘米)。代碼如下：
<html>
<head><title>CSS長度單位的區別 - pt,px和cm的區別</title></head>
<body >
以下div寬度300pt，高度30pt： <br>
<div style = "width:300pt;height:30pt;border:1px solid blue;"></div>
以下div寬度300px，高度30px ：<br>
<div style = "width:300px;height:30px;border:1px solid blue;"></div>
以下div寬度10cm，高度3cm ： <br>
<div style = "width:10cm;height:3cm;border:1px solid blue;"></div>
</body>
</html>
結果是，cm(厘米)也是隨著顯示器解析度變化而變化的。
對於電腦的螢幕裝置而言，像素 (Pixel )或者說px是一個最基本的單位 ，就 是一個點。其它所有的單位，都和像素成一個固定的比例換算關係。所有的長度單位基於螢幕進行顯示的時候，都統一先換算成為像素的多少，然後進行顯示。所以，就電腦的螢幕而言 ，相對長度和絕對長度沒有本質差別。任何單位其實都 是像素 ，差別只是比例不同。
因為px能夠精確地表示元素在螢幕中的位置和大小，網頁主要是為了螢幕顯示。
如果把討論擴充到其它輸出裝置，比如印表機，基本的長度單位可能不是像素，而是其它的和生活中的度量單位一致的單位了。
CSS絕對長度單位 是對於輸出裝置(output device)而言的。拿pt來說，這是一個在文字排版工具(w ord,adobe等)中非常常用的字型單位，不管你的顯示器解析度是1024*768，還是800*600，同一篇文檔列印 在紙面上的結果是一樣的。
網頁主要 是為了螢幕顯示，而不是為了列印等其它需要的。
寫網頁用哪個長度單位更好，是px還是pt呢？
我個人比較偏向px，因為px能夠精確地表示元素在螢幕中的位置和大小，網頁主要是為了螢幕顯示，而 不是為了列印等其它需要的。
CSS相對長度單位(relative length unit )
output device)而言的。拿pt來說，這是一個在文字排版工具 。
CSS相對長度單位中的相對二字，表明了其長度單位會隨著它的參考值的變化而變化，不是固定的。
以下是CSS相對長度單位列表：
| CSS相對長度單位 | 說明 |
| em | 元素的字型高度The height of the element's font |
| ex | 字母x的高度The height of the letter "x " |
| px | 像素Pixels |
| % | 百分比Percentage |
絕對長度單位是一個固定的值。比如 我們常用的有mm，就 是毫米的意思。
以下是CSS絕對長度單位列表：
| CSS絕對長度單位 | 說明 |
| in | 英寸Inches (1 英寸 = 2 .54 厘米 ) |
| cm | 厘米Centimeters |
| mm | 毫米Millimeters |
| pt | 點Points (1點 = 1/72英寸) |
| pc | 皮卡Picas (1 皮卡 = 12 點) |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
