em單位全面解讀

2021-06-09 22:52:30 字數 1977 閱讀 7251

em單位編寫可擴充套件樣式表的最重要工具就是em單位,因此它被首先介紹。使用em來製作可伸縮的樣式表。它最初以字母m命名,em單位在印刷術中有乙個長期的傳統,即用於度量水平寬度。例如,把在美國文字中常常看到的長劃線(-- )稱為破折號,因為從歷史觀點上看,em單位具有和字母m相同的寬度。它較窄的形式(-)常常出現在歐洲文字中,與上類似稱為連線號。

這麼多年以來em的含義已經發生了變化。並不是所有字型都包含字母m(例如漢字),但是所有字型都有高度。因此該術語逐漸是指字型的高度-- 而不是字母m的寬度。

注釋:em可用來製作可伸縮的樣式表!

在css中,em單位是一種用於測量長度的通用單位(例如元素周圍的頁邊空白和填充)。可以在水平和垂直方向使用它,這使習慣於僅把em用於水平測量的傳統印刷商感到震驚。通過擴充套件em單位使其能夠用於垂直測量,使它已變成乙個強大的單位-- 因為它如此強大以至於很少使用其他長度單位。

讓我們看乙個簡單的示例,在此我們使用em單位來設定字型大小:

當用於指定字型大小時,em單位是指父元素的字型大小。因此,在上面的示例中h1元素的字型大小被設定為body元素的字型大小的兩倍。為了查明h1元素的字型大小,需要了解body的字型大小。由於在樣式表中沒有指定這種字型大小,瀏覽器必須在其他某個方找到字型大小-- 乙個恰當的地方是在使用者的首選項中。因此如果使用者將正常的字型大小設定為10磅,那麼h1元素的字型大小就為20磅。這使得文件標題行相對於周圍的文字而言更引人注目。因此,最好總是使用em來設定字型大小。

注釋:總是使用em來設定字型大小!

習慣於桌面發布的設計者可能不希望em引入的間接方式,而願意直接指定字型大小應該是20磅。在css這樣做是可行的(參看第5章"字型"中有關字型大小屬性的描述),但是使用em是一種更好的解決方案。假如乙個視力較差的使用者將他的正常字型大小設定為20pt(20磅)。如果正如所建議的那樣,h1的字型大小是2em,h1元素的字型大小將會隨著縮放並以40磅顯示。但是如果樣式表將字型大小設定為20磅,那麼字型將不能縮放並且標題行的尺寸將與周圍文字的大小相同。

em單位的作用並不僅限於字型大小。圖3-1顯示了乙個所有長度都用em指定的頁面設計-- 包括元素周圍的填充和頁邊空白。

讓我們首先考慮填充。在css中,填充是在某個元素周圍新增的空白以便將該元素與其餘內容相分離。填充的顏色總是與它所圍繞的元素的背景顏色相同。在圖3-1中,使用此條規則為右邊的選單增加了填充:

div.menu
通過使用em來指定填充寬度,填充的寬度是相對於div元素的字型大小而定的。作為乙個設計者,確實不必關心使用者螢幕上填充的確切寬度;設計者關心的是正在編排的頁面的比例。如果元素的字型大小增加,那麼元素周圍的填充也隨之增加。圖3-2說明了這一情況,其中選單的字型大小增加了,同時頁面比例卻保持不變。

圖3-2  由於使用em來指定頁邊空白和

填充,它們相對於字型大小而縮放

在選單填充的外面是頁邊空白區域。頁邊空白區域確保在元素的周圍有足夠的空白以便使頁面看起來不那麼緊促。下面這條規則用來設定選單周圍的頁邊空白:

div.menu
圖3-2標識出了頁邊空白區域。再次指出,使用em能夠確保可縮放的設計。

在本書中可以找到em的另乙個作用,即將大多數段落第一行的縮排尺寸設定為1.8em。相同的數值用於**示例的左邊頁邊空白,如下面所示:

p 

pre

那麼既然em如此重要,css為何還要使用其他單位呢?因為在有些情況下,其他單位也是有用的。例如,這裡給出了一種百分比也同樣適用的情況,即使並不比em更好:設定body元素的頁邊空白。要記住在html頁面中顯示的所有內容都在body內部,因此設定該元素的頁邊空白也就是設定頁面的整體形狀。使用如下這兩條規則可以在頁面兩邊提供適度寬度的頁邊空白:

body
這種設定使文字佔據整體寬度的75%,並且左邊的頁邊空白比右邊的頁邊空白略寬。嘗試這樣做一下!您會發現頁面看起來更加專業。在body元素上設定的百分數值通常是相對於瀏覽器視窗的。因此在上乙個示例中,文字將覆蓋75%的瀏覽器視窗。

注釋:使用相對單位度量長度!

rem 單位 和 em 單位

首先要知道 rem 和 em 是相對單位 我們通過 來看 rem 和 em的使用和區別 em 相對於父級 test 16px test test 顯示效果 我們可以看到,首先我們重置瀏覽器的預設顯示字型大小為16px 即便預設顯示大小也是16px body中的第乙個段落標籤的字型大小也就是16px ...

em單位使用小結

em是乙個css的單位。em是乙個相對的單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。引自css2.0手冊 一般在dom元素中,當前行內物件內文字的字型尺寸是相對所指的是相對於元素父元素的font size。比如說 如果在乙個設定字型大小...

CSS的長度單位 em 與em標籤

css支援多種長度單位。它們可被分成兩大類 絕對長度單位 以不依賴於顯示裝置的絕對尺寸來定義 長度 相對長度 相對其它為瀏覽器所知的單位來定義長度 絕對長度度量可使用五種單位 英吋 in 厘公尺 cm 公釐 mm 磅 point,寫作 pt 字高 pica,寫作pc 磅和字高通常被用作印刷單位,其中...