1. css相對長度單位
ø em 元素的字型高度
ø ex 字型x的高度
ø px 畫素pixels
ø % 百分比percentage
2. css絕對長度單位
ø in 英吋inches（1英吋=2.54厘公尺）
ø cm 厘公尺centimeters
ø mm 公釐millimetre
ø pt 點points（1點=1/72英吋）
ø pc 皮卡picas（1皮卡=12點）
3. 單位em的說明
em指字型高，任意瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合：1em=16px。那麼12px=0.75em。但是em並不是固定的，它會繼承父級元素的字型大小。你可能會在content這個div裡把字型大小設為1.2em, 也就是12px。然後你又把選擇器p的字型大小也設為1.2em，但如果p屬於content的子級的話，p的字型大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。這是因為content的字型大小被設為1.2em，這個em值繼承其父級元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作為其子級，em則繼承content的字型高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。
4. 單位pt的說明
在印刷排版中,point是乙個絕對值,它等於1/72英吋,可以用尺子丈量的,物理的英吋。但是在css中pt含義卻並非如此。因為我們的顯示器被分割為了乙個個的畫素，單個畫素只能有一種顏色 (為了簡化，這裡暫不討論次畫素反鋸齒技術)，要在螢幕上顯示，必須先把以 pt 為單位的長度轉換為以畫素為單位的長度，這個轉換的媒介，就是 dpi (事實上，這裡的所謂的 dpi，是作業系統和瀏覽器中使用的術語，即為 ppi, pixels per inch，和掃瞄器、印表機、數位相機中的 dpi 是不同的概念)。
例如，無論在哪個作業系統中，firefox 瀏覽器預設的 dpi 都是 96，那麼實際上 9pt = 9 * 1/72 * 96 = 12px。
所以，雖然「dpi」中的「i」和「1pt 等於 1/72 inch」中的「inch」，都不代表物理上的英吋，但這兩個單位互相之間是相等的，也就在相乘中約掉了。
那麼，真實的物理長度怎麼計算呢?請拿出一把尺子，丈量你的顯示器的可見寬度 (我這裡是 11.2992 英吋)，除以橫向解析度 (我這裡是 1024 畫素)，得到的就是每個畫素的物理長度。
現在我們可以回答這樣乙個問題，網頁上 9pt 的字型究竟占用了多寬的空間?答案是: 9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英吋 = 0.3363 厘公尺。
5. pt和px
雖然pt是絕對單位，但是那只是針對輸出裝置而言的，在文字排版工具（word，abobe）中是非常有用的字型單位。不管顯示器的解析度是多少，列印在紙面上的結果是一樣的。
但是網頁主要為了螢幕顯示，而不是為了列印等其他需要的。而px能夠精確地表示元素在螢幕中的位置和大小。
當然。在dpi是96的情況下，9pt=12px。
CSS長度單位及區別 em ex px pt in
1.css相對長度單位 em 元素的字型高度 ex 字型x的高度 px 畫素pixels 百分比percentage 2.css絕對長度單位 in 英吋inches 1英吋 2.54厘公尺 cm 厘公尺centimeters mm 公釐 millimetre pt 點points 1點 1 72英吋...
CSS長度單位及區別 em ex px pt in
1.css相對長度單位 em 元素的字型高度 ex 字型x的高度 px 畫素pixels 百分比percentage 2.css絕對長度單位 in 英吋inches 1英吋 2.54厘公尺 cm 厘公尺centimeters mm 公釐 millimetre pt 點points 1點 1 72英吋...
css 長度單位
畫素 螢幕 顯示器 實際上是由乙個乙個的小點點構成的 不同螢幕的畫素大小是不同的，畫素越小的螢幕顯示的效果越清晰 所以同樣的200px在不同的裝置下顯示效果不一樣 百分比 也可以將屬性值設定為相對於其父元素屬性的百分比 設定百分比可以使子元素跟隨父元素的改變而改變 doctype html en u...