CSS 中的 rem 和 em 有何不同？

在网站源代码中，我有时看到开发人员使用rem单元。是否类似于em？我尝试看看它实际上做了什么，但它与什么相关？

Demo

HTML

<div>Hello <p>World</p></div>

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

EMs 相对于其父级的字体大小

REMs 相对于基本字体大小

当中间容器改变字体大小时，这一点很重要。具有 EM 的子元素将受到影响，而使用 REM 的子元素则不会受到影响。