在CSS中的单位长度用的最多的就是px em rem，对于三者的区别以前没有细纠过，导致很多代码书写不规范，先给结论：
- px（pixel)是固定的像素点，是相对于显示器屏幕分辨率而言。
- em和rem比px更灵活，更适合响应式布局。
- em是相对于当前对象内文本的字体尺寸；rem是相对于html根元素。
px
IE无法调整那些使用px作为单位的字体大小，px实际上就是计算机上的一个像素点，比较稳定和精确。但是缺点是无法根据设备的尺寸变化改变大小，从未无法自适应布局。
em
为了解决px的问题，提出了em。它是相对于当前对象内文本的字体尺寸，若没有设置行内文本的字体尺寸，则使用浏览器默认字体尺寸，一般为16px，这里有一个小技巧：
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
- body选择器中声明Font-size=62.5%；
- 将你的原来的px数值除以10，然后换上em作为单位；
- 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
但em使用起来依旧有诸多不便，复杂的嵌套逻辑使得更改了部分元素会产生字体大小变化的连锁反应。
rem
rem是CSS3新增加的相对单位，即root em，是相较于根元素（html)
除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
总结
- 一般来说，px用于元素的边框和定位；
- em和rem应用于响应式布局，且偏向于rem，rem的根据根节点使得计算更清晰；
- CSS里的尺寸长度非常多，单位是一个很小的点，但是只有吃透这个小的知识点，才能写出漂亮美观的页面，以下是CSS中的相对单位长度和绝对单位长度，也应该了解一下（图片来源菜鸟教程）
