1. 绝对长度单位
绝对长度单位是相对于固定的物理测量单位而言的，它们在不同的媒体和设备上保持一致的大小。常见的绝对长度单位包括像素（px）、英寸（in）、厘米（cm）、毫米（mm）等。
- 像素（px）：像素是 Web 开发中最常用的长度单位，它是屏幕上显示的最小单位。1 像素表示屏幕上的一个点，通常用于定义元素的尺寸和位置。（虽然是绝对单位，但是取决于屏幕的分辨率；所以也可以说像素是绝对单位中的相对单位）
div {
width: 200px;
height: 100px;
}
- 英寸（in）：英寸是常见的物理长度单位，1 英寸等于 2.54 厘米。在打印样式表中，常用英寸来定义页面尺寸。
@media print {
body {
width: 8in; /* 8 英寸宽 */
height: 11in; /* 11 英寸高 */
}
}
- 厘米（cm）：厘米是国际单位制中的长度单位，1 厘米等于 0.3937 英寸。它通常用于打印样式表或需要以厘米为单位的设计。
@media print {
.printable-element {
width: 21cm; /* A4 纸的宽度 */
height: 29.7cm; /* A4 纸的高度 */
}
}
- 毫米（mm）：毫米是厘米的千分之一，通常用于更精细的测量，比如打印样式表中的页边距设置。
@media print {
.printable-element {
margin: 10mm; /* 10 毫米的页边距 */
}
}
2. 相对长度单位
相对长度单位是相对于另一个长度单位的长度单位，它们的大小取决于其他因素，例如父元素的大小或视口的大小。常见的相对长度单位包括百分比（%）、em（字体高度的倍数）、rem（根元素的字体高度的倍数）、vw（视口宽度的百分比）和 vh（视口高度的百分比）等。
- 百分比（%）：百分比是相对于父元素的长度单位，它可以用于定义元素的宽度、高度、边距等。
.container {
width: 80%; /* 容器宽度为父元素宽度的 80% */
}
- em：em 是相对于元素的字体大小的倍数，例如，1 em 等于当前元素的字体大小，2 em 等于当前字体大小的两倍。
div{
font-size: 40px;
width: 10em;
/* 400px */
height: 10em;
p {
/* 20px */
font-size: 0.5em;
/* 200px */
width: 10em;
/* 200px */
height: 10em;
}
}
- rem：rem 是相对于根元素（html）的字体大小的倍数，它可以用于全局的字体大小设置。更适合做响应式布局。
html {
font-size: 16px; /* 设置根元素字体大小为 16 像素 */
}
div {
font-size: 1rem; /* 段落文字大小为根元素字体大小的 1 倍 也就是 16 px */
/* 160px */
width: 10rem;
}
- vw 和 vh：vw 和 vh 分别代表视口宽度和视口高度的百分比，它们可以用于响应式设计中，以视口的大小为基准定义元素的尺寸。
.container {
width: 50vw; /* 容器宽度为视口宽度的一半 */
height: 80vh; /* 容器高度为视口高度的 80% */
}
综上所述，CSS 中的单位包括绝对长度单位和相对长度单位。绝对长度单位是固定的，它们在不同设备上有固定的值；而相对长度单位是相对的，它们的值取决于其他因素，例如父元素的大小或视口的大小。根据实际需求和设计目标选择合适的单位对于开发响应式和可维护的样式表非常重要。
