1.第一种常用单位 px
1.1什么是像素？（pixel）
在前端开发中，视口的水平方向和竖直方向是有很多个小方格组成的。每个小方格就是一个像素。如果说一个电脑的分辨率为2560*1080,表示在其水平方向有 2560 个像素点，竖直方向有 1080 个像素点。最终该电脑屏幕就是由这些像素点组成的矩阵。
所以我们通常以 PX 表示像素。例如： width： 300px；height：200px；表示该元素在其父元素所产生的坐标系中占据 300*200 个像素。
2.第二个常用单位：百分比
百分比在前端开发中是一个动态单位，永远以当前元素的父元素作为参考进行计算。
比如一个元素的 width：20%；height：30%；该元素的最终大小取决于父元素的大小。
百分比的特点：
1.子元素的高度参考父元素的高度计算；
2.子元素的宽度参考父元素的宽度计算；
3.父元素大小产生改变时适用了百分比计算大小的子元素与父元素的相对大小保持不变，也就是说父元素变大子元素也变大，父元素变小，子元素也变小。
3.第三个单位： em 和 rem
em即 element 的缩写，此单词是一个动态单位，他是依托于元素的字体大小变化的。如果一个元素的字体大小设置为 12px，那么此时 1em=12px。
em 会继承父元素的字体大小
reｍ 即：root element 的缩写，也就是一个动态单位。它是依托于根元素所设置的字体大小来变化的。如果根元素的字体大小为 20px，那么 1rem=20px。如果该元素的字体大小为12px ，并不影响 1rem 的最终大小。
rem只根据根元素的大小变化
4.第四个常用单位为 vw ，vh
v 代表 viewport，即视口，应用程序或者浏览器窗口
vw： viewport width；视口宽度百分比
vh： viewport height；视口高度百分比
系统会将视口宽度和高度分成 100 份，那么 1vw 表示视口宽度的 1%，1vh表示视口高度的 1%。
vw 和 vh 是一个动态值，会随着视口的大小变化而变化
