CSS長度單位及區別 em ex px pt in

2021-05-23 15:32:21 字數 1683 閱讀 2025

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...