CSS 单位用于测量和指定元素的尺寸、距离和其他属性。下面是一些常见的 CSS 单位及其使用方法的详细解释：
-
像素（Pixel，px）：像素是最常用的单位，它表示屏幕上的一个点。在大多数情况下，使用像素作为单位是最合适的，因为它们提供了精确的控制和一致的视觉效果。例如，
width: 200px;将元素的宽度设置为 200 像素。 -
百分比（Percentage，%）：百分比单位相对于父元素的尺寸进行计算。例如，
width: 50%;将元素的宽度设置为父元素宽度的 50%。 -
em（em）：em 单位用于相对于元素自身的字体尺寸进行计算。例如，如果一个元素的字体大小为 16px，
margin-top: 2em;将在顶部创建一个相当于 32px 的外边距。 -
rem（root em）：rem 单位与 em 单位类似，但是相对于根元素（即 <html> 元素）的字体尺寸进行计算。这使得 rem 单位更方便，因为它受根元素字体大小的影响，而不是父元素的字体大小。
-
vh 和 vw：vh（视窗高度，Viewport Height）和 vw（视窗宽度，Viewport Width）是相对于视口（浏览器窗口）的高度和宽度的单位。例如，
height: 50vh;将元素的高度设置为视口高度的 50%。 -
其他单位：除了上述常见单位外，还有一些其他单位可用于特定的 CSS 属性，如秒（s）用于动画持续时间、毫秒（ms）用于动画延迟、角度单位如度（deg）、弧度（rad）、梯度单位如变化率（grad）等。
在使用这些单位时，你可以与数字进行计算、组合使用或根据具体需求进行调整。要注意的是，不同单位适合不同的场景，需要根据具体情况选择。另外，对于响应式设计，使用相对单位（如百分比、em、rem、vh、vw）可以更好地适应不同屏幕尺寸。