常见的布局单位：px,rem,em,百分比（%）,vm/vh
1.像素px
是页面的基础布局，一个像素表示终端（电脑/手机等）屏幕所能显示的最小区域。
2.em和rem
相对于px更具有灵活性。都是相对长度单位。区别：em相对于父元素，rem相对于根元素。
rem和px之间的换算。
px = rem * 设置的根节点字号
浏览器默认字号是16px;也就是 1*16px = 16px 即1rem = 16px
例：
html{font-size:12px}
div{width:4rem;}
div的pc是：4*12 = 48px;
3.百分比（%）
当浏览器的宽度和高度发生变化的时候，通过百分比单位，可以使浏览器中的组件的宽和高随浏览器的变化而变化，从而实现响应式，一般认为子元素的百分比相对于直接父元素。
4.vw/vh
与视图窗口有关的单位。
vw表示相对于视图窗口的宽度，视窗高度100vw；
vh表示相对于视图窗口的宽度，视窗宽度100vw。
