em/px/rem/vh/vw单位的区别

一、绝对长度单位

1.px

表示像素，显示器上每个像素点大小都是相同的

二、相对长度单位

2.em

相对于当前对象内文本的字体尺寸，如未设置对行内文本字体的尺寸，则相对于浏览器的默认字体（1em=16px）
em值不是固定的，会继承父级元素的大小

<style>html {font-size: 10px; /* 简化font-size的设置，16px*62.5%=10px */}.big {font-size: 1.4em; /* 14px */}.small {font-size: 1.2em; /* 12px */}
</style>

3.rem

只相对于html根元素font-size的值来计算

<style>html {font-size: 62.5%; /* 简化font-size的设置，16px*62.5%=10px */}.big {font-size: 1.4rem; /* 14px */}.small {font-size: 1.2rem; /* 12px */}
</style>

4.vh/vw

vh：将窗口的高度分为100等份，100vh表示满高，50vh表示一般的高度，vw同理表示窗口的宽度

5.%

%与vh和vw的区别在于，相对于的父元素不同，%是相对于父元素，而vh和vw是相对于窗口
普通元素：正常理解的父元素
position:absolute 元素：相对于已定位的父元素
position:fixed元素：相对于viewport（可视窗口）