CSS中的em單位

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

em是css中的乙個相對單位，它的單位長度是根據元素的文字垂直長度來決定的。可以作用在width、height、line-height、margin、padding、border等樣式的設定上。

1em=元素中文字的1個垂直高度

瀏覽器中的文字一般預設為16px，也就是說，預設的情況下：

1em=16px

body

在css中，如果乙個元素沒有設定font-size，那麼它的font-size值就是它父元素的font-size值，這很好理解，就是簡單的繼承而已。eg:

body
divstyle>
div>
body>

body
divstyle>
div>
body>

body
divstyle>
div>
body>

事實上，不僅是width，子元素中除了font-size的em是根據父元素的font-size確定的，其他所有em都是根據自身的font-size確定的。

body
divstyle>
div>
body>

由下面的例子可以反向推導出px轉em的計算公式

divstyle>

如果元素自身設定了font-size，那麼參考文字大小就是自身的font-size大小

如果元素自身沒有設定font-size，那麼參考文字大小就是父元素的font-size大小

為元素設定font-size時，如果使用em作為單位，那麼參考文字大小是父元素的font-size大小

文字大小使用px、em、pt還是百分比的討論持續了很久，em單位同樣擁有其缺點。我們已經知道，在不設定元素font-size的情況下，em總是根據父元素的font-size來確定長度；即使元素設定了font-size，多次巢狀使用em也往往會造成疏忽，不僅使用前需要大量計算，而且不能保證沒有漏網之魚。這將是乙個繁雜而低效率的工作。

詳解css中的em單位

em是相對長度單位，相對於當前物件內文字的字型尺寸，也就是font size設定的大小。它的單位長度是根據元素的文字文字垂直長度來決定的。如當前對行內文字的字型尺寸未被人為設定，則尋找父級的font size,如果沒有父級或者父級沒有設定font size,就相對於瀏覽器的預設字型尺寸 16px 例...

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 是非常有用的單位，因為它可以自動適應使用者所使用的字型。...