px、em和rem的区别

• px:像素。是一个确定的长度单位，设置字体大小为20px，则表示字体大小为固定的值。
• em和rem都是相对单位，em和rem的值都不是固定的。em是相对于父级元素的大小倍数，例如2em表示设置为父级的2倍大小；rem是相对根元素的大小倍数。
  举例说明

如上图代码所示，用html{}定义了根元素大小为15px。

• 第一个段落中的文字“我是1em”是根元素大小的1倍，即为15px。
• 第二个段落文字没有设置文字格式，直接采用head中设置的body{}格式，为2em,父级的两倍大小，body的父级就是html，所以是html的两倍，也就是30px,所以“我是2em”显示为30像素。
• 第三个段落设置字体大小为2em，即为父级body的两倍，而body又是html的两倍，所以这一个段落中的文字大小为2*2*15px=60px。
• 第四个段落设置字体大小格式为2rem，即直接是根元素大小的2倍，所以为2*15px=30px。
• 第五个段落设置字体大小为16px,是一个确定的值，所以显示出来的字体大小直接就是16px。