詳解css中的em單位

2021-10-24 15:15:37 字數 1133 閱讀 5880

em是相對長度單位,相對於當前物件內文字的字型尺寸,也就是font-size設定的大小。它的單位長度是根據元素的文字文字垂直長度來決定的。

如當前對行內文字的字型尺寸未被人為設定,則尋找父級的font-size,如果沒有父級或者父級沒有設定font-size,

就相對於瀏覽器的預設字型尺寸(16px)。

例如1: 預設狀態下直接給內部div寬高10em

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

example 01title

>

>

style

>

head

>

>

>

div>

body

>

html

>

inspect 截圖如下:

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

example 01title

>

>

style

>

head

>

>

>

div>

body

>

html

>

inspect 截圖:

這兩個例子足矣。

CSS中的em單位

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

CSS中em單位和px單位的區別

這裡引用的是jorux的 95 的中國 需要重寫css 的文章,題目有點嚇人,但是確實是現在國內網頁製作方面的一些缺陷。我一直也搞不清楚px與em之間的關係和特點,看過以後確實收穫很大。平時都是用px來定義字型,所以無法用瀏覽器字型放大的功能,而國外大多數 都可以在ie下使用。因為 1.ie無法調整...

css中單位em和rem

w3cschool中給出css中尺寸單位如下 單位描述 百分比 in英吋 cm厘公尺 mm公釐 em1em 等於當前的字型尺寸。2em 等於當前字型尺寸的兩倍。例如,如果某元素以 12pt 顯示,那麼 2em 是24pt。在 css 中,em 是非常有用的單位,因為它可以自動適應使用者所使用的字型。...