CSS的長度單位 em 與em標籤

2021-05-08 06:46:02 字數 2369 閱讀 4430

css支援多種長度單位。它們可被分成兩大類:絕對長度單位(以不依賴於顯示裝置的絕對尺寸來定義

長度);相對長度(相對其它為瀏覽器所知的單位來定義長度)。

絕對長度度量可使用五種單位:英吋(in)、厘公尺(cm)、公釐(mm)、磅(point,寫作

pt)、字高(pica,寫作pc)。磅和字高通常被用作印刷單位,其中1pica=12pt。css把1pica定義為

1/72in,也就是說,72pica=1in。這也是高品質印表機常用的 adobe postscript 語言所採用的定義。

css還支援以象素表示的「絕對」長度——象素(pixels)即為計算機顯示屏上的一點。然而,由於象

素密度和使用者對顯示器解析度選擇(同一顯示螢幕可支援640*480的解析度,也可支援1024*768的分辨

率)的不同,象素的絕對大小會在不同顯示器上有很大差異。這樣,以象素表示的長度實際上與顯示器有

關。以象素作為計算機顯示單位的優點在於象素是嚴格定義的單位。但是,當列印網路文件時,象素單位會

帶來問題。

象英吋和厘公尺這樣的絕對長度單位用在列印排版時非常有用,因為它們能提供在固定大小的紙面上布局

文件時所需要的絕對定位。也正因為這個原因,絕對長度不宜在電子顯示文件中使用,這是因為在

6inches*4inches和21inches對角顯示屏之中的顯示將有所不同,並無法保證在給定的顯示屏上瀏覽器能用

固定的視窗區域(使用者可選擇視窗的大小)來顯示文件。考慮到這樣的差異,使用能隨顯示區大小或文字字

體大小而自動調整的單位是再恰當不過了。所幸的是,有三種css長度單位能實現這一行為。

相對長度度量可以有三種形式:em單位,ex單位和percentage(百分比)。em和ex單位相對於

字型的大小來定義長度。em單位相對於實際字型的磅值來定義長度:這樣,如果現在的字型大小為 12pt,

那麼1.5em=18pt。相反,ex單位則是相對於字型的x高度來定義長度:即相對於當前字型中字母「x」的高

度。這樣,乙個單位的ex大小既取決於字型的大小,也取決於字型族型別,因為在給定的磅值下,實際的x

高度將隨字型族不同而不同。

目前來看,em單位比ex單位更為可靠:為了在不同瀏覽器之間獲得最好的相容性,最好還是使用em單

位。但要注意的是,em單位和ex單位都會導致列印問題。

百分比單位為第三種相對單位。這一單位把長度定義為相關長度的百分比值。按照css規範,相關長度

既可是父單元字型的大小,也可是父類格式單元的寬度 ——各種情況依問題中特性的不同而不同。有乙個

極其重要的警告:現有的瀏覽器並不是相對於單元寬度來計算百分比值,因而也就不能正確地實現百分比長

度。相反,所有的瀏覽器都把和字型無關的百分比長度計算為整個瀏覽器視窗寬度的百分比值。

長度值的格式由乙個符號('+'或'-',預設時為 '+')緊跟乙個數字再跟乙個單位標示符(乙個兩個字元

的縮寫)。有兩種長度單位形式:相對和絕對單位。樣式表用相對單位更容易控制從乙個媒介到另乙個的縮

放比例(如從電腦到雷射印表機)。百分比單位和關鍵值(如 'x-large')也有同樣的優點。如下:

h1     元素字型高度

h1     字母 'x' 的高度

畫素單位是相對於螢幕的圖形解析度。如果輸出裝置的畫素密度與標準的計算機螢幕相差很多,使用者將

重新調整畫素值。推薦的畫素值是離讀者一手臂長的距離用90dpi的畫素密度。子元素繼承計算結果值,而

不是相對值,如:

body

h1

在上例中,'h1' 的 'text-indent' 值是 36pt,而不是 45pt 。

***********************************

em 標籤 -- 強調標籤

* em標籤是成對出現的,以開始,以結束

* 屬性:

* common -- 一般屬性

*em是emphasis的縮寫

()標籤告訴瀏覽器把其中的文字表示為強調的內容。對於所有瀏覽器來說,這意味著要把這段文字用斜體來顯示。

在文字中加入強調也需要有技巧。如果強調太多,有些重要的短語就會被漏掉;如果強調太少,就無法真正突出重要的部分。這與調味品一樣,最好還是不要濫用強調。

儘管現在 標籤修飾的內容都是用斜體字來顯示,但這些內容也具有更廣泛的含義,將來的某一天,瀏覽器也可能會使用其他的特殊效果來顯示強調的文字。如果你只想使用斜體字來顯示文字的話,請使用 標籤。除此之外,文件中還可以包括用來改變文字顯示的級聯樣式定義。

除強調之外,當引入新的術語或在引用特定型別的術語或概念時作為固定樣式的時候,也可以考慮使用 標籤。例如,w3school 經常對重要的術語使用 標籤。標籤可以用來把這些名稱和其他斜體字區別開來。

em表示什麼長度單位 CSS中強大的EM

使用css也好久了,但一直都是在使用 px 來設定web元素的相關屬性,未敢使用 em 主要原因是,對其並不什麼了解,只知道一點概念性的東西,前段時間在專案中要求使用 em 作為單位設定元素,所以從頭對 em 學習了一回。稍為有一點理解,今天特意整理了乙份博文與大家一起分享,希望對童子們有些許的幫助...

CSS中的em單位

css中有眾多單位,常用的px是絕對單位,em則是相對單位。在響應式和移動端的大前提下,使用em能夠更方便快捷的一次性調整web文件極其html元素的字型大小 寬度 邊距 邊框等一系列屬性,可以說在某些方面,使用em作為單位比px更靈活。em是css中的乙個相對單位,它的單位長度是根據元素的文字垂直...

CSS 的相對單位 em 與 ex

相對單位之所以得名,是因為它們是根據與其他事物的關係來度量的,共有3種相對長度單位 em ex和px。前兩個單位代表em height和x height,這是常用的印刷度量單位。而 px 代表 畫素 這個值被定義為相對單位,因為它取決於顯示裝置的解析度。em在 css 中,em 定義為一種給定字型的...