CSS 中 px，em和rem 的区别 学习笔记

简单讲，px是绝对单位，em和rem是相对单位。px大家都熟悉，这里主要讨论em和rem。

现在有以下一个段落：

<p>当斧头来到树林的时候，好多树都说，至少<span>它的手柄</span>是自己人</p>

当不给它设置字体大小时，使用默认大小，也就是16px大小，效果如下：

em

em是指相对于父元素的大小，也就是说对于p和span而言，它的大小都是1em，这里的1em = 16px。

我们将span的大小改为2em，效果如下：

span{
font-size: 2em;
}

可以看到span的大小相对于p大了一倍，假设span里面还有一级标签：

<p>当斧头来到树林的时候，好多树都说，至少<span>它的<a>手柄</a></span>是自己人</p>

现在我们知道p标签大小是

1em

，span的大小是

2em

，如果想让a标签的大小和p标签一样，应该设置为多少？

因为em是相对标签，所以不能设置成1em，而是相对于其父元素span的0.5em：

a{
font-size: 0.5em;
}

rem

使用em很好地将相对大小表现出来了，但是我们也发现在子元素里有时候想设置除了父元素以外的元素大小时，还要计算相对大小，rem就解决了这个问题。

rem是指相对于html根元素的字体大小。

还是刚才的例子，我们想保证a标签字体大小和p标签一样，而p标签的大小正好是相对于html的 1倍，所以我们也可以将a标签的大小设置为

1rem

:

a{
font-size: 1rem;
}

效果也是一样的。