绝对单位
px：像素大小
即Pixel，1080P屏幕代表宽度有1920个像素，高度有1080个像素，如下绿色区域代表屏幕，红色区域代表一张宽高分别为960px和540px的图片，最终效果是图片占据屏幕的四分之一，因为宽度和高度都是它的一半。
pt：磅
pt即Points，印刷行业的常用单位，是一个标准单位，1pt = 1/72英寸，前端比较少用。
pc：派卡
十二点活字（印刷中使用时），相当于我国新四号铅字的尺寸。。。撤不下去了，没玩过印刷。。。
in：英寸
in即Inches。我还未查阅到在英寸在css中的计算规则，因为笔记本一般是15英寸1080P的，台式机一般是22英寸1080P的，像素总量一样，面积不一样，像素大小肯定不一样了，同分辨率下不同尺寸应该有相同英寸计算结果。
猜想：同分辨率不同尺寸下有不同的DPI（dots per inch），即每英寸的点数量，以上两种设备中笔记本电脑的DPI会较高，在宽高比16：9的比例中，对角线和宽度的比是25：16 = 5：4。
15英寸笔记本宽度15英寸 * 5 / 4 = 18.75英寸，1920像素 / 18.75英寸 = 102.4像素/英寸
22英寸显示器宽度=22 * 5 / 4 = 27.5英寸，1920像素 / 27.5英寸 = 69.8像素/英寸。
所以CSS中1in的计算结果在同分辨率不同尺寸的显示器中计算结果不同，但是显示长度相同，
肉眼看到的是1英寸，在15英寸设备上占用102个像素，22英寸设备上占用69个像素。
cm：厘米
耳熟能详，不细介绍，Centermeters缩写。
mm：毫米
耳熟能详，不细介绍，Millimeter缩写。
q：1/4毫米
如标题，Quarter millimeter。
相对单位
%：百分比
在不清楚CSS计算原理的情况下瞎摸经常都能实现效果，但既然是百分比，就一定有参考的，我们要清除这个参考是什么。
-
width & height
宽度和高度使用%时，宽高都是参考包含块的宽高，以下结构如果给item包一层span是不影响的，span不是块，特殊情况：container没有定义高度，item不是absolute定位，则等同于auto。
html元素的包含块是视口viewport，html百分比高度总是有效，想在body使用百分比，需要html预设高度或让body绝对定位
<div
class="container"
style="width: 500px; height: 500px; background-color: chartreuse;">
<div class="item"
style="width: 50%; height: 50%; background-color: lightsalmon;">
</div>
</div>
-
margin & padding
统一参照包含块宽度。在块布局的排版中，水平方向的内外边距一定要参照包含块的宽度，其次考虑垂直方向的时候，如果不一致就会很难用，很难计算得到相同的边距值，所以统一以宽度作为参考有较好的可用性。
-
border-radius
参照自身尺寸。主要还是解释border-radius挺麻烦的
border-radius： A B C D / E F G H;
ABCD为水平半径，参考宽度，EFGH为垂直半径，参考高度。。。吧啦吧啦，我实在扯不下去，东西太多了，看这个把玩一下，再看这个详解
设置50%对于正方形来说可以变成圆
但是长方形就不行...
.item {
background-color: yellowgreen;
width: 300px;
height: 100px;
border-radius: 50%;
}
/* 上下两者等同，50%会分别作用到水平半径和垂直半径中 */
.item {
background-color: yellowgreen;
width: 300px;
height: 100px;
border-radius: 150px / 50px;
}
下图，水平左上角100%宽度，垂直左上角50%高度。
-
background-position
参考的是空白尺寸。初始值是0% 0%，空白尺寸 = 元素尺寸 - 图片尺寸，空白尺寸也分水平和垂直。
如下：容器500px，背景图300px，都是正方形。
坑点1：元素比图片小时计算出负值，此时会逆向放置。
坑点2：如果仅指定一个值（水平），垂直值将是50%，如果你知道，当我没说。。。
-
font-size
参考父元素的font-size，父元素的font-size为20px时，如果子元素不设置font-size，将继承20px，如果设置了font-size是50%，得到的效果是font-size:10px;
-
line-height
参考自身的font-size，
-
vertical-align
参考自身的line-height。
-
left、right、top、bottom
水平参照宽度，垂直参照高度。
-
transform的translate
参考边界框的尺寸，水平参考边界框宽度，垂直参考边界框高度。标准盒模型（content-box）是边界是border。
补充：translate3d对应3个维度，第三个值不可以使用百分比。
-
附加
百分比的继承：百分比不会被继承，百分比值最终还是通过参考值转换成具体值，如果此属性属于继承属性，计算值会被继承。
em：元素字体倍数
相对单位。即element，和当前元素的font-size有关，和父元素有关仅仅是因为font-size是一个继承属性，当前元素没有设置font-size时会继承父元素的字体大小。
.container {
background: lightseagreen;
width: 20em;
height: 20em;
}
.item {
background-color: yellowgreen;
font-size: 1.5em;
width: 10em;
height: 10em;
}
<div class="container">
<div class="item"></div>
</div>
container没有设置font-size，继承得到16px，宽高20 * 16px = 320px。
item设置了font-size，计算得16px * 1.5 = 24px；宽高 24px * 10 =240px。
rem：根元素字体倍数
相对单位。即root element，只和html元素的font-size有关，由于至于一个html元素的影响因素，是用于适配分辨率的良好手段，配合媒体查询动态设置html元素的font-size让页面布局基本保持一致。
html {
font-size: 20px;
}
.container {
background: lightseagreen;
width: 20rem;
height: 20rem;
}
.item {
background-color: yellowgreen;
width: 14rem;
height: 14rem;
}
<div class="container">
<div class="item"></div>
</div>
container宽高 20px * 20 = 400px，item宽高 20px * 14 = 280px。
vw & vh：视口宽度与高度
相对单位。参考视口的宽高vw即viewport width，vh即viewport height，浏览器中网页内容的可视区域即视口，如图红框部分。
应用场景：固定定位的横幅banner广告、侧边栏高度充满屏幕。
.container {
background: lightseagreen;
width: 100vw;
}
.item {
background-color: yellowgreen;
width: 50vw;
height: 50vh;
}
<div class="container">
<div class="item"></div>
</div>
container宽度充满视口宽度，高度被item撑开。
item宽度是半个视口宽度，高度是半个视口高度。
vmax & vmin：视口的最大值和最小值
相对单位。vmax即viewport maximum，vmin即viewport minimum。
应用场景：将元素置为不可见时可以将其定位到视口外。
.container {
background: lightseagreen;
width: 100vmin;
height: 100vmin;
}
.item {
background-color: yellowgreen;
width: 25vmax;
height: 25vmax;
}
<div class="container">
<div class="item"></div>
</div>
图中红框为视口。
ex：x的高度
文档中小写字母x的高度，差不多一个汉字的半高。x一般和基线有关。
ch：0的宽度
文档中数字0的宽度，用得少，我也不知道这个存在的意义。
总结
px是最常用的，基本每一个页面都会用到。
在响应式布局中，em和rem是主角
vw、vh、vmax、vmin经常在响应式布局中控制尺寸，但em和rem能控制好的情况下不建议用vw等单位。
浏览器预设尺寸: 16px =1em = 100% = 12pt
