相對單位之所以得名,是因為它們是根據與其他事物的關係來度量的,共有3種相對長度單位:em
、ex
和px
。
前兩個單位代表em-height
和x-height
,這是常用的印刷度量單位。
而 px 代表「畫素」,這個值被定義為相對單位,因為它取決於顯示裝置的解析度。
em在 css 中,em 定義為一種給定字型的 font-size 值。如果乙個元素的font-size: 14px
,那麼對於該元素,1em = 14px
。
例如乙個 h1 的字型大小為 24px,乙個 h2 字型大小為 18px,乙個 h3 字型大小為12px,如果給這三個元素設定margin-left: 1em;
,那麼它們的左邊距就分別為 24px、18px、12px。
h1, h2, h3
>
hello h1h1
>
>
hello h2h2
>
>
hello h3h3
>
注意下圖三行的左邊距
em
這個單位非常靈活,比如首行縮排兩個字元的實現就可以用到 em:text-indent: 2em;
ex和
em
不同的是,ex
是指所用字型中小寫 x 的高度,通常為字型高度的一半。div
.x
>
定義一條與 x 一樣高的線h4
>
>
yyyppp***div
>
class
="x"
>
div>
效果如下,注意紅色盒子高度只與 x 一致
CSS之EM相對單位
之前以為em單位只是在font size中起到繼承作用,後來慢慢覺得,繼承,應該是在幾乎所有樣式中都可以是實現的,比如height,width,border.今天才簡單測試了下,果真是可以實現,不過,只是要基於font size的一併出現而已!也就是說,想height等樣式也應用上em的繼承相對大小...
CSS的長度單位 em 與em標籤
css支援多種長度單位。它們可被分成兩大類 絕對長度單位 以不依賴於顯示裝置的絕對尺寸來定義 長度 相對長度 相對其它為瀏覽器所知的單位來定義長度 絕對長度度量可使用五種單位 英吋 in 厘公尺 cm 公釐 mm 磅 point,寫作 pt 字高 pica,寫作pc 磅和字高通常被用作印刷單位,其中...
CSS中的em單位
css中有眾多單位,常用的px是絕對單位,em則是相對單位。在響應式和移動端的大前提下,使用em能夠更方便快捷的一次性調整web文件極其html元素的字型大小 寬度 邊距 邊框等一系列屬性,可以說在某些方面,使用em作為單位比px更靈活。em是css中的乙個相對單位,它的單位長度是根據元素的文字垂直...