CSS的長度單位(em)與em標簽

2020-03-24 17:12:41

字體：大中小

來源：轉載

供稿：網友

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 { margin: 0.5em } 元素字體高度 H1 { margin: 1ex } 字母 'x' 的高度像素單位是相對于屏幕的圖形分辨率。如果輸出設備的像素密度與標準的計算機屏幕相差很多，用戶將重新調整像素值。推薦的像素值是離讀者一手臂長的距離用90dpi的像素密度。子元素繼承計算結果值，而不是相對值，如： BODY {
font-size: 12pt;
text-indent: 3em;
}
H1 { font-size: 15pt } 在上例中，'H1' 的 'text-indent' 值是 36pt，而不是 45pt 。 ================================== em 標簽 -- 強調標簽 * em標簽是成對出現的,以 em 開始,以 /em 結束 * 屬性: * Common -- 一般屬性 * em是emphasis的縮寫
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS操作DIV的float用法

下一篇：DIV+CSS對網站SEO的影響