CSS 常见单位 em/ex/rem/vh/vw/px/%

1. em/ex/rem/vh/vw/px/% 区别?

单位	特点
em (段落前空两格）	em是相对长度单位。em是相对于元素本身的字体大小的。相对于当前对象内文本的字体尺寸。 如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。 em 的值并不是固定的，em 会继承父级元素的字体大小。 在css中唯一例外的是font-size属性，它的em和ex值指的是相对父元素的字体大小。
ex	相对于元素字体的x-height， 这个x-height取自字符x的高度的意思。与em有所区别的是，当你改变字体font-family的时候，使用em单位的其大小不会受到影响，而ex会根据字体重新计算出新的大小。
rem	相对单位，相对的只是HTML根元素font-size的值。 rem是相对根元素进行计算的。只要在html元素上指定了其font-size大小，后面的元素都将使用这个大小作为基准进行计算。
vw/vh	vw是viewport’s width的简写，表明它的值是根据视口的宽度计算而来的，换算关系是1vw等于百分之一的window.innerWidth。 根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。 与vw类似，vh是根据视口高度计算出来的。
px	表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的。
%	% 是基于【父元素】的宽度/高度的百分比

2. vw、vh视口单位与%的区别？

1. % 是基于【父元素】的宽度/高度的百分比，vw，vh是根据视窗的宽度/高度的百分比。常用于自适应网页布局。
2. 视口单位优势在于【vh】能够直接获取高度，而用 % 在没有设置 body 高度情况下，是无法正确获得可视区域的高度。

3. vh、vw 扩展

vh： 相对于视窗的高度, 视窗被均分为100单位的vh;
vw：相对于视窗的宽度, 视窗被均分为100单位的vw;

vmax：相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
vmin：相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;

视区：所指为浏览器内部的可视区域大小，
即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

• 100vh就是指元素的高度等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。

• 设置height:100vh，不论元素没有内容，该元素都会与被撑开与屏幕高度一致。

• vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。