| 单位 | 相对于 |
|---|---|
em | 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。 |
ex | 字符“x”的高度。 |
ch | 数字“0”的宽度。 |
rem | 根元素的字体大小。 通过设置html中的font-size 去控制所有元素的大小 |
lh | 元素的行高。 |
rlh | 根元素的行高。当用于根元素的 font-size 或 line-height 属性时，它指的是这些属性的初始值。 |
vw | 视口宽度的 1%。 |
vh | 视口高度的 1%。 |
vmin | 视口较小尺寸的 1%。 |
vmax | 视口大尺寸的 1%。 |
vb | 在根元素的块向上，初始包含块的尺寸的 1%。 |
vi | 在根元素的行向上，初始包含块的尺寸的 1%。 |
svw、svh | 分别为视口较小尺寸的宽度和高度的 1%。 |
lvw、lvh | 分别为视口大尺寸的宽度和高度的 1%。 |
dvw、dvh | 分别为动态视口的宽度和高度的 1%。 |
使用百分比：
百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。
css中常用的函数：
rgb()、hsl() 、url()、calc()
calc()如果你想计算一些你在编写项目的 CSS 时无法定义的数值，并且需要浏览器在运行时为你计算，那么它特别有用。使用 calc() 使框宽为 20% + 100px。20% 是根据父容器 .wrapper 的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的 20% 是多少，所以我们使用 calc() 来告诉浏览器为我们做这个计算
