在CSS样式编写过程中，单位的选择是布局实现的基础，相对单位和绝对单位是CSS中两类核心的单位类型，两者的设计逻辑和使用效果存在明显区别，同时也有部分共通的特性。
绝对单位的定义与常见类型
绝对单位是固定不变的单位，其实际显示尺寸不会受到父元素样式、屏幕尺寸或者用户设置的影响，无论在什么环境下，相同数值的绝对单位渲染出来的物理尺寸基本一致。
常见的CSS绝对单位包括以下几种：
- px：像素单位，是最常用的绝对单位，对应屏幕上的物理像素点，在标准显示环境下1px对应1个物理像素。
- cm：厘米，对应物理长度单位厘米。
- mm：毫米，对应物理长度单位毫米。
- in：英寸，1英寸等于2.54厘米。
- pt：点，印刷行业常用单位，1pt等于1/72英寸。
- pc：派卡，1pc等于12pt。
绝对单位的使用示例
以下是使用绝对单位设置样式的代码示例：
/* 绝对单位样式示例 */
.box {
width: 200px; /* 固定宽度200像素 */
height: 5cm; /* 固定高度5厘米 */
font-size: 16pt; /* 字体大小16点 */
margin: 10mm; /* 外边距10毫米 */
}
相对单位的定义与常见类型
相对单位没有固定的物理尺寸，其实际渲染大小会依赖于某个参考值，参考值发生变化时，相对单位对应的实际尺寸也会随之改变，这也是相对单位适配性更强的原因。
常见的CSS相对单位包括以下几种：
- em：相对于当前元素的字体大小，如果当前元素没有设置字体大小，会继承父元素的字体大小，1em等于当前元素的font-size值。
- rem：相对于根元素（html元素）的字体大小，1rem等于根元素设置的font-size值，不会受到父元素样式的影响。
- %：百分比单位，相对于父元素的对应属性值，比如宽度百分比相对于父元素的宽度，字体大小百分比相对于父元素的字体大小。
- vw/vh：vw相对于视口宽度的1%，vh相对于视口高度的1%，视口指的是浏览器可见区域的尺寸。
- vmin/vmax：vmin相对于视口宽度和高度中较小的那个的1%，vmax相对于视口宽度和高度中较大的那个的1%。
相对单位的使用示例
以下是使用相对单位设置样式的代码示例：
/* 相对单位样式示例 */
html {
font-size: 16px; /* 根元素字体大小16px，1rem = 16px */
}
.container {
width: 80%; /* 宽度为父元素宽度的80% */
padding: 2rem; /* 内边距为2rem，即32px */
}
.title {
font-size: 2em; /* 字体大小为当前元素字体大小的2倍，如果当前元素未设置则继承父元素 */
}
.full-screen {
width: 100vw; /* 宽度为视口宽度的100% */
height: 100vh; /* 高度为视口高度的100% */
}
相对单位和绝对单位的相同点
两者的相同点主要体现在以下几个方面：
- 都属于CSS中合法的单位类型，可以直接用于设置长度、尺寸相关的CSS属性，比如width、height、font-size、margin、padding等。
- 都可以参与CSS中的数值计算，配合calc()函数实现动态尺寸计算，比如
width: calc(100% - 20px)就是相对单位和绝对单位的结合使用。 - 在部分固定场景下，两者的渲染效果可以等价，比如在根元素字体大小固定为16px时，1rem和16px的渲染尺寸一致。
相对单位和绝对单位的不同点
两者的核心差异主要体现在以下几个维度：
| 对比维度 | 绝对单位 | 相对单位 |
|---|---|---|
| 尺寸参考基准 | 固定的物理或屏幕标准，不随外部环境变化 | 依赖父元素、根元素或者视口等动态参考值 |
| 响应式适配能力 | 适配性差，固定尺寸在不同屏幕尺寸下容易出现布局错乱 | 适配性强，可自动跟随参考值变化适配不同屏幕 |
| 用户设置影响 | 不受用户字体大小调整等设置的影响 | 部分单位会受用户设置影响，比如em、rem会跟随字体大小设置变化 |
| 常见使用场景 | 适合固定尺寸元素，比如边框宽度、阴影大小等不需要适配的部分 | 适合需要适配的布局元素，比如容器宽度、字体大小、间距等 |
| 维护成本 | 修改时需要逐个调整数值，维护成本高 | 修改参考值即可批量调整相关元素，维护成本低 |
实际开发中的选择建议
在实际项目开发中，不需要完全排斥某一类单位，而是根据场景灵活选择：
- 边框、阴影、圆角等不需要跟随屏幕尺寸变化的部分，优先使用px等绝对单位，保证样式稳定。
- 字体大小、容器宽度、间距等需要适配不同屏幕的部分，优先使用rem、vw、%等相对单位，提升响应式效果。
- 如果项目需要兼容用户调整字体大小的需求，避免使用px设置字体大小，优先使用rem或者em。
以下是结合两类单位的实际开发示例：
/* 混合使用单位的实际示例 */
html {
font-size: 16px;
}
.card {
width: 90%; /* 相对单位，适配不同屏幕 */
max-width: 1200px; /* 绝对单位，限制最大宽度 */
margin: 20px auto; /* 绝对单位外边距 */
padding: 1.5rem; /* 相对单位内边距，跟随根字体大小变化 */
border: 1px solid #eee; /* 绝对单位边框 */
border-radius: 8px; /* 绝对单位圆角 */
font-size: 1rem; /* 相对单位字体大小 */
}
.card-title {
font-size: 1.25rem; /* 相对单位，基于根字体大小 */
margin-bottom: 0.5em; /* 相对单位，基于当前元素字体大小 */
}
需要注意的是，虽然px属于绝对单位，但在高分辨率屏幕（比如Retina屏）下，浏览器会自动进行缩放，1px可能对应多个物理像素，这是浏览器的默认适配行为，不属于单位本身的特性变化。