Что такое "em", если размер шрифта документа указан в ems?

в CSS,em - относительная единица, основанная на размере шрифта документа. Итак, что же такое em тогда, если размер шрифта в документе измеряется в ems? Предположим, мы скажем:

<style type = "text/css">
body
{
    font-size: 1em;
}
</style>

так,em теперь рекурсивно определенными. Так как это обрабатывается браузером?

на W3C по документам говорят:

единица измерения 'em' равна вычисленному значению 'размера шрифта' собственность элемент, на котором он используется. Исключение составляют случаи, когда 'em' встречается в значении самого свойства' font-size', в котором случае это относится к размеру шрифта родительского элемента. Он может быть использован для вертикального или горизонтального измерения. (Этот блок также иногда называется quad-width в типографских текстах.)

но что, если элемент document.body, значит, родительского элемента нет?

3 ответов


body не является корневым элементом документа - это очень распространенное заблуждение. Родительский элемент body is html, размер шрифта по умолчанию которого совпадает с настройкой размера шрифта по умолчанию браузера (обычно 16px).1

это применимо, даже если вы установили font-size значение в ems on и body и html. Поэтому если вы сделали это:

html, body { font-size: 2em; }

тогда, предполагая размер шрифта по умолчанию 16px как, html будет размер шрифта 32px (дважды размер шрифта по умолчанию) и body будет иметь размер шрифта 64px (дважды своего родителя, html).


1если быть точным, то html размер шрифта элемента по умолчанию -начальное значение, medium, который согласно спецификации соответствует предпочтительному размеру шрифта по умолчанию, установленному пользователем.


Он будет принимать значение по умолчанию браузеров 16px, если ни один родительский элемент не определил его.

Также см. Это:http://pxtoem.com/


Это будет относительно любого размера шрифта браузера по умолчанию, который будет указан в физическом размере, например "10pt".