em
是一种 CSS 的相对单位,用于表示字体的大小。1em
的大小等于当前元素继承的 font-size
的值。例如,如果一个元素的父元素的 font-size
是 16px
,那么 1em
就等于 16px
。
需要注意的是,em
是一个相对于当前元素的字体大小的相对单位,所以它的实际大小可能会随着上下文的变化而变化。例如,如果你在一个元素上设置了 font-size: 2em
,那么它的字体大小将是其父元素字体大小的两倍。
em
单位不仅可以用于 font-size
,还可以用于其他需要指定大小的 CSS 属性,比如 width
、height
、margin
、padding
等。使用 em
单位的好处是它可以根据用户的字体设置自动调整大小,使得网页在不同的设备和用户设置下都能保持良好的可读性和布局效果。
以下是一个示例:
body {
font-size: 16px;
}
h1 {
font-size: 2em; /* 实际字体大小为 32px */
}
p {
font-size: 0.8em; /* 实际字体大小为 12.8px */
}
在这个例子中,<h1>
元素的 font-size
是 2em
,即它的字体大小是其父元素 body
的字体大小的两倍,等于 32px
。同样,<p>
元素的 font-size
是 0.8em
,即它的字体大小是其父元素 body
的字体大小的 80%
,等于 12.8px
。