em單位使用小結

2022-04-23 06:28:20 字數 788 閱讀 1725

em是乙個css的單位。

em是乙個相對的單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。(引自css2.0手冊)

一般在dom元素中,當前行內物件內文字的字型尺寸是相對所指的是相對於元素父元素的font-size。比如說:如果在乙個設定字型大小為「16px」,此時這個的後代元素教程了是將繼承他的字型大小,除非重新在其後代元素中進行過顯示的設定。此時,如果你將其子元素的字型大小設定為「0.75em」,那麼其字型大小計算出來後就相當於「0.75 x 16px = 12px」;

具體的內容 可以看 w3cplus的詳細介紹。

說下我遇到的問題,我在使用的時候發現表單元素input和button使用em設定高度的時候出現了問題。高度總表現的和預期的不一樣。

**如下 :

發現在瀏覽器中input雖然和div屬於同乙個父級,但是發現input的高度和div的高度是不一樣的。

瀏覽器對於表單元素input有乙個預設的font-size,em根據這個行內文字的大小重新計算了高度,所以和div的高度不一樣

可以見到,在瀏覽器中,input,textarea,keygen, select, button 這幾個元素都是有瀏覽器預設字型的,如果想使用em控制表單元素的樣式,需要給表單元素的font-size重新定義一下,防止瀏覽器預設的font-size影響了 em的使用。

rem 單位 和 em 單位

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

em和rem 單位的使用

em和rem px em和rem三者的關係 1.px 概念 畫素。相對長度的單位。特點 所有瀏覽器均支援 2.em 概念 是長度的相對單位。特點 em的值不是固定的 會繼承父級元素的字型大小。相對父級的的字型大小。3.rem 概念 css3新增的單位,長度的相對單位,以html元素的字型單位做參考。...

em單位全面解讀

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