什麼是em的上下文？

的CSS

h1 { font-size: 2em; } 
.smaller { font-size: 0.5em; }

的HTML

<h1>Hi, I am a <span class="smaller">toad</span></h1>

將單詞「蟾蜍」是0.5倍16px的（瀏覽器的標準字體大小）或者它會是0.5倍2em（h1的字體大小）？

2013-03-15 Robin Cox

這一個傷害了我的大腦。 – Jefferson 2013-03-15 11:52:25

哎呀，好問題！我的腦袋疼！ – evilscary 2013-03-15 11:53:56

不知道這個問題如何與RWD相關。 – BoltClock 2013-03-15 11:55:55

它等於計算它所使用的元素的'font-size'屬性的值。繼承在文檔樹下運行。

要回答你的問題，它將是2em的0.5倍，而這又將是h1的父母的計算字體大小的2倍。 phew。

同樣重要的是要注意，如果您在其他的CSS屬性使用em，例如，width或height，結果將被從計算的font-size計算應用的任何元素width或height來，等...

下面的文章描述了em單元的使用和上下文，在我看來，以及一些其他的閱讀材料和資源...... rem單位也許你也有點感興趣。

你可能也想看看這個小提琴，看看它是如何作用的更清晰一點：

2013-03-15 11:52:47 Seer

只有在與其他屬性一起使用時才使用它的元素的計算'font-size'屬性。如果它在'font-size'本身上使用，那麼它會爲其自己的計算引用* parent的*計算字體大小。 – BoltClock 2013-03-15 11:57:22

實際上，它不一定是父級，它只是它繼承的任何東西，例如，如果body的font-size設置爲16px，並且你嵌套5個div，並且最後一個具有字體 - 大小設置爲「2em」，其計算出的「字體大小」將爲「32px」。 – Seer 2013-03-15 11:59:18

嗯，是的。無論哪種方式，就像你所說的繼承從父母到孩子的管理者一樣。 – BoltClock 2013-03-15 12:00:16

會是t的2em的5倍他在上下文中是h1元素。

要強制它相對於16px，您必須首先將h1的父級設置爲font-size 16px。

.wrapper {font-size：16px;} h1 {font-size：2em; } .smaller {font-size：0.5em; }

<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>

在這種情況下

SO，

請注意，em是名義上基於當前字體中的M個字符高度。對於所有的意圖，然後h1有一個32像素的大小和span.smaller有一個16像素的大小。

2013-03-15 12:06:33

或者你可以使用'rem'單元而不是'em'來相對於瀏覽器基礎'font-size'（當然，所有瀏覽器支持的問題當然都是） – Luca 2013-03-15 12:09:19

@Luca - 是的，支持問題是爲什麼css「重置」存在，並經常使用，以便「起點」是一個更一致的預測值。 – 2013-03-15 12:14:11

是的，這絕對是一個普遍的有效點，我主要是指這個：http：//caniuse.com/rem（像往常一樣IE獲取方式！） – Luca 2013-03-15 12:16:30

它取決於父元素像素大小。如果你的父元素像素大小爲16像素

.5em將相等於你的基地像素的一半，因此將是H1將等於32px8px和2em。

這一切都取決於你如何在CSS中設置父元素像素大小。

2013-03-15 12:10:13 defau1t

不是。它基於父元素的計算字體大小，而不是正文字體大小。 – Quentin 2013-03-15 12:14:42

@Quentin：我也意味着父母的大小。我沒有說身體。將編輯基地給家長。 – defau1t 2013-03-15 12:15:59

但是在這種情況下父字體大小以像素爲單位，不是嗎？ – 2013-03-15 19:45:06

的em unit表示元素的字體大小，在font-size屬性，它表示的父元素的字體大小的值使用時除外。從這個意義上講，在案例中，上下文是父元素。

在呈現的情況下，單詞「蟾蜍」的字體大小因此等於h1的父級的字體大小。從給出的數據可以推斷出它的具體價值。

當計算字體大小時，將在處理此構造時計算出h1父級的字體大小;我們稱之爲s。首先計算h1的字體大小，將的（父級的字體大小）乘以2.然後計算span元素的字體大小，將其父級的字體大小乘以0.5，產生的。從理論上講，舍入誤差可能會導致這些過程中的最小偏差，但計算機中可以假設乘以2和0.5。

2013-03-15 12:25:31

回答