在CSS中,an em是基于文档字体大小的相对单位。那么,em如果文档 本身 的字体大小以ems为单位,那么那究竟是什么呢?假设我们说:
em
<style type = "text/css"> body { font-size: 1em; } </style>
因此,em现在已递归定义了。那么浏览器如何处理呢?
在W3C文档说:
‘em’单位等于使用它的元素的’font-size’属性的计算值。例外是’em’出现在’font- size’属性本身的值中,在这种情况下,它是指父元素的字体大小。它可以用于垂直或水平测量。(此单位有时在印刷文本中也称为四角宽度。)
但是,如果元素是document.body,那么没有父元素怎么办?
document.body
body不是文档的根元素- 这是一个非常普遍的误解。的父元素body是html,其默认字体大小与浏览器的默认字体大小设置(通常为16px)匹配。1个
body
html
16px
即使您font-size在和上 都 在ems中设置了一个值,这也适用。因此,如果您这样做:body``html
font-size
body``html
html, body { font-size: 2em; }
然后,假设16px用户设置的默认字体大小为,html则字体大小为32px(默认字体大小的两倍),并且body字体大小为64px(其父字体的两倍html)。
32px
64px
1 确切地说,html元素的默认字体大小是初始值,medium根据规范,该值对应于用户设置的首选默认字体大小。
medium