首先是一些“老”单位，也就是我们经常看见的单位：
探索心得：
1.上面除了%和em，都是固定单位
2.%:百分比是相对于父亲元素的大小.还有box-sizing会影响百分比的计算
3.em:首先得知道浏览器的默认字体大小：font-size：16px
第二：em其实跟百分比很像，但是em对照的只有字体大小，不像百分比，长度对长度，宽度对宽度，字体对字体等，em只相对于字体
其实em很简单，em先参照自己的font-size，如果自己有设置，对于非字体：1em等于自己的font-size，对于本身字体：1em等于父级font-size，如果没有，就相对于父级元素，1em等于父级font-size
新的单位：
1.rem：这个单位的r是root（根），也就是说，用了这个单位，该属性的大小是相对于html元素的font-size的大小。
2.vh和vw：viewport height和viewport width，也就是英语名称，视口的高度和宽度，视口平均分成100份，所以整个屏幕高度和宽度就是100vh和100vw，比如grid圣杯布局中，要设置最小高度希望是一个屏幕，就用min-height：100vh
3.vmin和vmax：viewport min和viewport max，视口长度>视口宽度：vmin就是视口宽度（100vmin等于视口宽度） vmax就是视口长度（100vmax等于视口长度），反之
4.ch：数字“0”的宽度，也就是让该长度为0的宽度 1ch等于0的宽度
5:ex: 相对于字符“x”的高度。通常为字体高度的一半 1ex等于x字符的高度
参照文章：https://www.w3cplus.com/css/px-to-em
https://blog.csdn.net/MessageBox_/article/details/82492153
css中的单位
原文地址：https://www.cnblogs.com/zhangjiayimy/p/9788900.html