1. 绝对单位
绝对单位在定义样式的时候是一种比较固定的方式，不会随着浏览器或系统的不同而改变。在 CSS 中，像素（px）是最常用的绝对单位，它的大小是相对于显示器、屏幕或是纸张的一英寸（inch）的一种物理尺寸。在绝大部分情况下，使用像素作为单位是十分稳定和可靠的，因为不同的显示器具有相似的像素密度。
例如，下面是一段示例代码，将一个元素的宽度设置为 300 像素：
div {
width: 300px;
}
这样，无论何时，这个元素的宽度都会是 300 像素。
1.1 缺点
虽然像素是一种可靠的绝对单位，但是也存在一些缺点。其中最主要的缺点就是这种单位是固定的，不能根据用户的浏览环境或是用户的偏好进行适应，从而可能导致对用户体验的影响。
例如，在一些小型的移动设备上，屏幕尺寸非常有限，如果用像素作为单位来编写样式，将可能导致元素在这些设备上显示不完整，或者无法正常展示。
2. 相对单位
相对单位是根据其他因素来计算尺寸的。这些因素可以是其他元素的尺寸、屏幕尺寸或者浏览器视口的尺寸。这种尺寸单位相对于固定尺寸的绝对单位更加灵活和适应性强。
2.1 em 和 rem
在相对单位中，最常见的是 em 和 rem。它们是相对于元素自身字体的大小来进行计算的。其中 em 的计算方式是相对于父元素的字体大小，而 rem 是相对于根元素（即 HTML 元素）的字体大小。
例如，下面是一段示例代码，将一个元素的高度设置为父元素字体大小的 2 倍：
div {
height: 2em;
font-size: 16px;
}
上面代码中，如果父元素的字体大小是 16px，那么这个元素的高度将会是 32px。
同样地，下面是一段示例代码，将一个元素的宽度设置为根元素字体大小的 50%：
div {
width: 50%;
font-size: 16px;
}
html {
font-size: 20px;
}
上面代码中，如果根元素（即 HTML 元素）的字体大小是 20px，那么这个元素的宽度将会是 10px。
2.2 vw 和 vh
除了 em 和 rem 之外，vw 和 vh 是另外两种常见的相对单位。它们是相对于视口的宽度和高度来进行计算的。其中 1vw 表示视口的宽度的 1%，1vh 表示视口的高度的 1%。
例如，下面是一段示例代码，将一个元素的宽度设置为视口宽度的 50%：
div {
width: 50vw;
}
上面代码中，如果视口的宽度是 960px，那么这个元素的宽度将会是 480px。
2.3 vmin 和 vmax
vmin 和 vmax 是相对于视口宽度和高度中的最小值或最大值来进行计算的。其中，vmin 表示视口宽度和高度的最小值，vmax 表示视口宽度和高度的最大值。
例如，下面是一段示例代码，将一个元素的高度设置为视口宽度和高度最小值的 20%：
div {
height: 20vmin;
}
上面代码中，如果视口的宽度是 960px，视口的高度是 640px，那么这个元素的高度将会是 128px。
3. 总结
绝对单位和相对单位各有各的优缺点，应该根据实际情况来选择使用。在一些移动设备和响应式网页开发中，使用相对单位会更加灵活和适应性强。
总的来说，对于样式定义，使用相对单位是更好的选择。不仅可以适应不同的显示区域，而且可以根据用户的喜好来定义。