像素
- 屏幕（显示器）实际上是由一个一个的小点构成的。
- 不同的屏幕像素的大小是不同的，像素越小的屏幕显示的效果越清晰。
- 所以同样的200px在不同的设备下显示的效果不一样。
- 例：
div {width: 200px; }
百分比
- 百分比是一个相对长度单位。
- 设置百分比可以使子元素跟随父元素的改变而改变。
- 例：（假设div为html子元素）
html {width: 500px; }
div {width: 40%; }
em
- em是相对于元素的字体大小来计算的。
- 1em == 1font-size
- em会根据字体大小的改变而改变。
- 例：
div {
font-size: 20px;
width: 10em;
}
rem
- rem是相对于根元素的字体大小来计算的。
- 例：
html {font-size: 20px; }
div {width: 10rem; }
来源：尚硅谷的视频教程
