在前端开发中，单位的使用，有很多种，em、px等，本文主要讲解em。不过在做对比之前，我们还是先了解em的一些基础知识,
1、 浏览器的字体的默认大小是16px
2、如果元素设置字体大小（有，有，有设了字体大小……）
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
3、如果元素没有设计字体大小 （没有， 没有 ， 没有设了字体大小 ……）
1 ÷ 元素自身的font-size × 需要转换的像素值 = em值
写下如下的代码：
初始显示效果
加一段css代码
从代码中我可以看，
1、p1没设置字体大小，p1的父级是浏览器的<html>，p1字体显示为16px； border的em值为1，宽度就为16px
2、p2设置了字体大小为20px，自然而然显示20px；border的em值为1，显示的宽度为20px；
3、p3给设置了一个字体大小为2em；p3_1的em就是相对于p3，p3_1的字体大小32px；border的em值为1，显示的宽度为32px；
如下图显示的效果：
进行对比可以得出以下结论：
一、从1和2对比可以看出，浏览器的默认字体大小是16px，em的是相对了父级的
二、从2和3看出，不管是设置em、还是设置像素px。都代表是：设置了字体大小
三、从1、2、3可以看出，元素width，height，border-weight等属性的em，相对元素自身字体的大小而言而言
做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833