css中的单位到底有多少种？它们之间有什么联系？它们之间又有什么区别？它们最终都会变成什么样的？今天我们就来一探究竟。
1. 什么是CSS单位
CSS单位是用来描述CSS属性值的单位，比如width、height、font-size等属性的值，都是用CSS单位来描述的。CSS单位可以分为两类：
- 绝对单位：绝对单位是指不会随着页面的缩放而改变的单位，比如
px、in、cm等。 - 相对单位：相对单位是指会随着页面的缩放而改变的单位，比如
em、rem、vw等。
两者的区别在于，绝对单位不会随着页面的缩放而改变，而相对单位会随着页面的缩放而改变。这里的页面缩放指的是浏览器的缩放，比如浏览器的缩放比例为200%，那么页面的缩放比例也是200%。
2. CSS单位的分类
CSS单位可以分为下面几类：
- 长度单位：长度单位是指用来描述长度的单位，比如
px、em、rem、vw等。 - 角度单位：角度单位是指用来描述角度的单位，比如
deg、grad、rad等。 - 时间单位：时间单位是指用来描述时间的单位，比如
ms、s等。 - 百分比单位：百分比单位是指用来描述百分比的单位，比如
%等。 - 其他单位：其他单位是指上述单位之外的单位，比如
fr、ch等。
下面只讲解长度单位，其他单位的讲解可以参考MDN。
3. CSS长度单位
CSS长度单位是用来描述长度的单位，比如px、em、rem、vw等。
长度单位主要作用于width、height、margin、padding、border、font-size等属性上。
长度单位一共有下面几种：
- 绝对长度单位：绝对长度单位是指不会随着页面的缩放而改变的长度单位，比如
px、in、cm等。 - 相对长度单位：相对长度单位是指会随着页面的缩放而改变的长度单位，比如
em、rem、vw等。 - 视口长度单位：视口长度单位是指会随着视口的大小而改变的长度单位，比如
vw、vh、vmin、vmax等。 - 百分比长度单位：百分比长度单位是指会随着父元素的大小而改变的长度单位，比如
%等。 - 字符长度单位：字符长度单位是指会随着字符的大小而改变的长度单位，比如
ch、ex等。 - 网格长度单位：网格长度单位是指会随着网格的大小而改变的长度单位，比如
fr等。
3.1 绝对长度单位
绝对长度单位是指不会随着页面的缩放而改变的长度单位，比如px、in、cm等。
绝对长度单位一共有下面几种：
px：px是指像素，是CSS中最常用的长度单位，它的大小是相对于显示器屏幕分辨率而言的。in：in是指英寸，1英寸等于2.54厘米。cm：cm是指厘米。mm：mm是指毫米，1毫米等于0.1厘米。pt：pt是指点，1点等于1/72英寸。pc：pc是指派卡，1派卡等于12点。
div {
width: 100px;
height: 100in;
margin: 100cm;
padding: 100mm;
border: 100pt solid red;
font-size: 100pc;
}
3.2 相对长度单位
相对长度单位是指会随着页面的缩放而改变的长度单位，比如em、rem、vw等。
相对长度单位一共有下面几种：
em：em是指相对于父元素的字体大小，如果父元素没有设置字体大小，则相对于浏览器的默认字体大小。rem：rem是指相对于根元素的字体大小，如果根元素没有设置字体大小，则相对于浏览器的默认字体大小。vw：vw是指相对于视口宽度的百分比。vh：vh是指相对于视口高度的百分比。vmin：vmin是指相对于视口宽度和视口高度中较小的那个的百分比。vmax：vmax是指相对于视口宽度和视口高度中较大的那个的百分比。
div {
width: 100em;
height: 100rem;
margin: 100vw;
padding: 100vh;
border: 100vmin solid red;
font-size: 100vmax;
}
3.3 视口长度单位
视口长度单位是指会随着视口的大小而改变的长度单位，比如vw、vh、vmin、vmax等。
视口长度单位一共有下面几种：
vw：vw是指相对于视口宽度的百分比。vh：vh是指相对于视口高度的百分比。vmin：vmin是指相对于视口宽度和视口高度中较小的那个的百分比。vmax：vmax是指相对于视口宽度和视口高度中较大的那个的百分比。
div {
width: 100vw;
height: 100vh;
margin: 100vmin;
padding: 100vmax;
}
3.4 百分比长度单位
百分比长度单位是指相对于父元素的百分比长度单位，比如%、%width、%height等。
百分比长度单位一共有下面几种：
%：%是指相对于父元素的百分比长度单位。
div {
width: 100%;
height: 100%;
margin: 100%;
}
这里的margin的百分比是相对于父元素的宽度的百分比长度单位，其他的百分比长度单位也是一样的，因为对于浏览器来说宽度是固定的，高度是可变的，所以margin或者其他的百分比长度单位都是相对于宽度的百分比长度单位。
3.5 字符串长度单位
字符串长度单位是指字符串的长度，比如ch、ex、cap、ic、lh、rlh等。
字符串长度单位一共有下面几种：
ch：ch是指字符的宽度。ex：ex是指字符的高度。cap：cap是指大写字母的高度。ic：ic是指字符的平均宽度。lh：lh是指行高。rlh：rlh是指根据字体大小计算的行高。
div {
width: 100ch;
height: 100ex;
margin: 100cap;
padding: 100ic;
border: 100lh solid red;
font-size: 100rlh;
}
这里会有很多单位会标红，因为这些单位目前还没有被浏览器支持，只是作为一个标准来存在。
3.6 网格长度单位
网格长度单位是指网格的长度，比如fr、min-content、max-content、fit-content、auto等。
网格长度单位一共有下面几种：
fr：fr是指网格的比例。min-content：min-content是指内容的最小宽度。max-content：max-content是指内容的最大宽度。fit-content：fit-content是指内容的最佳宽度。auto：auto是指自动宽度。
div {
width: 100fr;
/*width: min-content;*/
/*width: max-content;*/
/*width: fit-content;*/
/*width: auto;*/
}
min-content、max-content、fit-content、auto这几个不是单位，而是一个值，是一个关键字，但是最终也会转换成具体的值。
4. CSS长度单位的转换
CSS长度单位的转换是指将一个长度单位转换成另一个长度单位，比如将px转换成em等。
这里讲的是不管任何单位，最终在浏览器中都会转换成px，具体的原理我们可以不用去了解，但是我们需要知道转换的规则，这样我们在写代码的时候就会更加清晰最终生成的效果。
先来看一张图：
上面的图中margin和padding的单位都是rem，那他们最终会是什么样子呢？来看看：
最后结果的单位是px，这里的px是根据html的font-size来计算的，所以可以看到margin-bottom的值是32px，margin-top的值是16px。
当然其他的单位也是一样的，比如em、rem、vh、vw等，最终都会转换成px，这个就留给大家自己去尝试验证了，这里的规则和css的继承规则是一样的。
5. 总结
本文主要讲解了CSS长度单位的概念，以及CSS长度单位的转换，内容不够干，但是很扩展。
