px:表示的是绝对的像素值，1px就是1像素大小
em:关于em，网上有资料说是关于父元素的，但是其实个人感觉这种说法是不对的，其实em的大小是根据自身的font-size确定的，而只是正常的情况下子元素继承了父元素的font-size
rem:是指根元素的大小，比如跟元素大小是16px(浏览器默认font-size)，那么1rem的大小就是16px
举个例子：
我们先来写一段代码：
<div class=‘div1‘>
<div class=‘div2‘></div>
</div>
.div1{
width: 100px;
height: 100px;
font-size: 16px;
}
.div2{
width: 1em;
height: 1em;
background: red;
}
上面的代码中，我们在浏览器运行就会得到结果，div2的width和height为16px，也就是现在div2元素的font-size的值也就是他的父元素设置的font-size的值，下面我们来改写下上面代码的css：
.div1{
width: 100px;
height: 100px;
font-size: 16px;
}
.div2{
width: 1em;
height: 1em;
font-size: 12px;
background: red;
}
当我们在div2的style里面设置了自己的font-size为12px，我们在运行代码，我们可以得到我们当前的div2中的width和height的值为12px。这样子我们就可以得到结论，em的值其实是根据自己来设定的，准确的说是自己的font-size的值，由此可见网上很多说em是相对于父元素的值的说法是错误的。
但是在开发中我们的每个元素都有不同的font-size那么我们就需要根据这个计算出不同的width和height的em值，这样子无论是开发还是维护起来成本都太高了，还有一个更严重的问题是层级嵌套会让我们对每个元素的font-size变得混乱。
所以一个更加友好的元素rem诞生。
所谓的rem根据的就是跟节点的font-size的值，举个例子：
html{
font-size: 20px;
}
.div1{
width: 1rem;
height: 1rem;
font-size: 12px;
background: red;
}
<div class=‘div1‘></div>
运行上面的代码，我们得到了当前div的width和height的值为20px，看来rem集成的是html的font-size并没有继承自己的font-size这样子我们开发起来就有一个相对的值了，这样的意义在于我们可以根据不同页面的width来设置不同的font-size值来实现移动端的适配问题，这个也就是手淘flexible的设计原理了，下一章我将会给大家讲解一下关于flexible的源代码！