CSS常用单位
CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax，按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位。
绝对长度单位
px 像素
通常而言，一个CSS像素代表屏幕设备的一个像素点，但是对于高分辨率屏幕而言一个CSS像素往往占多个设备像素，也就是说有多个屏幕像素点来表示1px，1px = 1in / 96。
in 英寸
1in = 2.54cm = 96px。
cm 厘米
1cm = 10mm = 96px/2.54 ≈ 37.8px。
mm 毫米
1mm = 0.1cm = 3.78px。
pt 磅
1pt = 1/72in ≈ 0.0139in = 1/722.54cm = 1/7296px ≈ 1.33px。
pc 派卡
1pc = 1/6in = 12pt = 1/6*96px = 16px。
相对长度单位
em
em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size，若用于其他属性，相对于本身元素的font-size，需要注意的是，使用em可能会出现1.2 * 1.2 = 1.44的现象，若父元素font-size属性设置为16px，下一级元素设置为1.2em，经计算实际像素为16px * 1.2 = 19.2px，再下一级元素若继续设置为1.2em则经计算为16px * 1.2 * 1.2 = 23.04px，这是因为父级的基准font-size属性被计算重设为另一个值，在子元素中使用em时需要根据父元素的font-size重新计算子元素的em值。
文字
Test
Test
rem
rem单位都是相对于根元素html的font-size来决定大小的，根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生相应的变化。由于所有元素都是以根元素的font-size为基准进行计算的，也就不存在em的1.2 * 1.2 = 1.44现象。rem不是只对定义字体大小有用，可以使用rem把整个网格系统或者UI样式库基于HTML根元素的字体大小上，这将带来更加可预测的字体大小和比例缩放，实现响应式的布局。
文字
Test
Test
ex
ex是指所用字体中小写x的高度，但不同字体x的高度可能不同，对于很多字体来说1ex ≈ 0.5em，所以很多浏览器在实际应用中取em值一半作为ex值，ex单位在实际中常用于微调。
文字
文字
ch
ch与ex类似，这一单位代表元素所用字体中0这一字形的宽度，更准确地说是0这一字形的预测尺寸，如果无法确定0字形的大小，则必须假定其宽为0.5em高为1em，也就是取em值的一半作为ch值。
文字
文字
百分比单位
%
当度量单位设置为百分比时，即可使浏览器组件宽高随着浏览器的大小相应变化。
- 子元素的
height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。 - 子元素的
top和bottom如果设置百分比，则相对于直接非static定位的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位父元素的宽度。 - 子元素的
padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。 - 子元素的
margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。 - 设置
border-radius为百分比，则是相对于自身的宽度，还有translate、background-size等都是相对于自身的。
vh vw vmin vmax
vh: 相对于视窗的高度，1vh等于视窗高度的1%。vw: 相对于视窗的宽度，1vw等于视窗宽度的1%。vmin:vw和vh中的较小值。vmax:vw和vh中的较大值。
代码示例
CSS单位
文字
Test
Test
文字
Test
Test
文字
文字
文字
文字
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/ebbf64b83f49
https://www.runoob.com/cssref/css-units.html
https://www.cnblogs.com/niuyaomin/p/12319211.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/length
https://www.cnblogs.com/liujunhang/articles/10686823.html
https://blog.csdn.net/VickyTsai/article/details/102960594
https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html