1. 引言
在CSS中，我们经常需要使用单位来定义元素的尺寸。其中最常见的单位是像素（px）、相对单位em和rem。这三种单位在CSS中有着不同的应用场景和特点。本文将详细介绍这三种单位的区别和使用方法。
2. 像素（px）
2.1 定义
像素（Pixel）是屏幕上最小可见单位的基本元素。在CSS中，像素通常被用于定义元素的尺寸和位置。
2.2 特点
像素是一个绝对单位，它的大小在不同设备上是固定的，不受其他因素的影响。因此，使用像素单位可以确保元素在不同设备和浏览器中具有一致的显示效果。
例如，下面的代码将一个div元素的宽度设置为200像素：
div {
width: 200px;
}
无论用户的设备屏幕大小如何，该元素的宽度始终保持为200像素。
3. 相对单位em
3.1 定义
em是相对于元素的字体大小计算的单位。当em用于定义元素的尺寸时，它将相对于父元素的字体大小进行计算。
3.2 特点
使用em单位可以实现元素的相对尺寸，使其能够根据父元素的字体大小自动调整。这对于构建响应式网页尤其有用。
例如，下面的代码将一个段落元素的字体大小设置为16像素，然后将相邻的span元素的字体大小设置为1.5em：
p {
font-size: 16px;
}
span {
font-size: 1.5em;
}
在这种情况下，span元素的字体大小将被计算为16px * 1.5 = 24px。
4. 相对单位rem
4.1 定义
rem是相对于根元素（通常是元素）的字体大小计算的单位。类似于em，但是rem的计算是相对于根元素而不是父元素。
4.2 特点
使用rem单位可以实现相对于根元素的尺寸，使得整个页面中的元素都可以按照相同的比例进行缩放。
例如，下面的代码将根元素的字体大小设置为10像素，然后将段落元素的字体大小设置为2rem：
html {
font-size: 10px;
}
p {
font-size: 2rem;
}
在这种情况下，段落元素的字体大小将被计算为10px * 2 = 20px。无论根元素的字体大小如何改变，段落元素的字体大小都会保持为原来的2倍。
5. 总结
在CSS中，像素（px）、em和rem是常用的尺寸单位。它们各自具有不同的特点和应用场景：
像素单位是一个绝对单位，适用于固定尺寸的元素。
em单位是相对于父元素的字体大小计算的单位，适用于实现元素的相对尺寸。
rem单位是相对于根元素的字体大小计算的单位，适用于实现整个页面的相对尺寸。
根据具体的需求和场景，选择合适的单位可以使得页面的布局和尺寸得到有效控制，并且能够实现响应式设计。