CSS里面的長度單位px/pt/em/in/pc/mm/cm解釋

在CSS中，度量單位分為兩種：

相對單位：px/em/ex/%
絕對單位：cm/pt/in/pc/mm

這些單位的具體解釋

px
相對長度單位。像素（Pixel）。
像素是相對於顯示器屏幕分辨率而言的。譬如，WONDOWS的用戶所使用的分辨率一般是96像素/英寸。而MAC的用戶所使用的分辨率一般是72像素/英寸。

em
相對長度單位。相對於當前對象內文本的字體尺寸。
如當前行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。

ex
相對長度單位。相對於字符“x”的高度。此高度通常為字體尺寸的一半。
如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。

pt
絕對長度單位。點（Point）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

pc
絕對長度單位。派卡（Pica）。相當於我國新四號鉛字的尺寸。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

in
絕對長度單位。英寸（Inch）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

mm
絕對長度單位。毫米（Millimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
cm
絕對長度單位。厘米（Centimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

究竟有什么區別呢？

    首先要明白一點，那就是屏幕分辨率。我們知道，在不同的分辨率下，像素點的大小是不同的。所以同一個網頁，以px作長度單位時，在不同的分辨率下顯示的大小是不同的。在低分辨率下，像素點較大，細節不夠清晰，顯示的頁面也大，但模糊不清。

    實際上,所有的單位,無論是相對還是絕對單位,最終都是轉化為px為單位的---在屏幕上的顯示。所以一般來說，在網頁制作時，基本單位都選擇px而不是pt，因為pt也是通過瀏覽器的DPI轉換成px顯示（比如FireFox的DPI是96，則有9pt = 12px）。不僅pt，cm/in/mm等都是轉換成px的。所以無論用絕對還是相對，在不同分辨率下都是會變的。不要以為我把長度設置為3cm，它就會在不同的分辨率下保持3cm不變。

那又為什么出現絕對單位和相對單位呢?

    我覺得pt還是很有用的一個單位，在打印時尤其如此。現在有的網頁已經實現了顯示是一個頁面，打印用另一種方式，我想在打印上采用的就是pt吧，因為針對不同的分辨率，打印出來的頁面都是一樣的大小。這就是絕對單位的第一個特征。但是依然要記住，在顯示上，這個單位代表的不是真實的物理長度，它也是要根據像素的實際大小（這個跟分辨率有關）進行調整的。

   那么絕對單位和相對單位是什么回事？首先可以了解下%單位。我們在學習導航欄的制作時，有過了解"一列寬度自適應"的布局手法。那里面將div容器的width屬性設置為80%，用的就是相對單位---相對瀏覽器窗口的大小，div塊的寬度是80%。

   實際上我們可以這樣理解，將px看做絕對單位---顯示上的絕對單位。其他的相對單位都是以它為基礎的。比如em,它就是相對當前文本字體的高度（假設當前文本字體的尺寸是 12px, 我們設置新的字體為1.5em,則新字體尺寸轉換為 12 * 1.5 = 18px）。要記住的就是em是相對父級元素的高度---假設第一個div里面我們設置了字體是12px,第二級我們設置為1.5em,第三級設置為1.5em，實際上字體的顯示是：第一級12px,第二級18px，第三級 18 * 1.5 = 27px。


如有不正確，請評論指正。