css单位

CSS单位分为绝对单位和相对单位。
绝对单位：大小是固定的，显示效果不会受到外界因素影响
相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。
注意：此处的相对指当前元素的字号（font-size）或者视口（viewport）尺寸。

1.px
像素px是相对于显示器屏幕分辨率而言的。如果不考虑屏幕分辨率，我们也可以把它当做绝对单位来看待。
2. em
em是相对于当前元素或当前元素父元素的font-size进行计算,如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸（16px）
在CSS中，em是相对于”当前元素“的字体大小而言的。其中，1em等于”当前元素“的字体大小。这里的字体大小指的是以px为单位的font-size值。例如，当前元素的font-size为10px，则1em等于10px;当前元素的font-size值为20px，则1em等于20px。

使用em作为单位的技巧：
首行缩进使用text-indent:2em实现
3. rem
rem是相对于根元素（html元素）的font-size进行计算,如html元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸（16px）

//使1rem=10px
html{font-size: 62.5%}  /* 10 ÷ 16 × 100% = 62.5% */

rem是CSS3新引入的单位，目前除了IE8以及以前的版本之外，大部分主流浏览器都是支持rem的。
4. vw、vh、vmax、vmin这四个单位都是基于视口
如果项目中使用viewport的宽度或高度，而不是父元素的，就使用vw和vh
vw是相对视口（viewport）的宽度而定的，1vw=1%视口宽度
vh是相对视口（viewport）的高度而定的，1vh=1%视口高度
应用场景：

• 任意元素高度与屏幕高度一致

//之前
.doc{height:100%}
html,body{height:100%}
//现在
.doc{height:100vh}

• 子元素大小根据浏览器改变而不是父元素
• 响应字体大小
• 相应垂直居中

.doc{
width:60vw;
height:60vh;
margin:20vh auto;
}

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值
5. %（百分比）

一般来说就是相对于父元素"相同属性"的值来计算的。
line-height的百分比是相对于父元素的font-size值来计算的
vertical-align的百分比是相对于当前元素的line-height值来计算的。

• 对于普通定位元素就是我们理解的父元素
• 对于position: absolute;的元素是相对于已定位的父元素
• 对于position: fixed;的元素是相对于ViewPort（可视窗口）

6.vm
css3新单位，相对于视口的宽度或高度中较小的那个
比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px
缺点：兼容性差