在 CSS 中，px 和 em 是两种常用的尺寸单位，它们的核心区别在于 计算方式 和 应用场景。
定义：绝对单位，表示屏幕上的物理像素点（如 16px）。
特点：
固定尺寸：1px 等于屏幕的一个物理像素点（在高分辨率屏幕下，浏览器可能自动缩放，但逻辑上仍是绝对单位）。
不继承：不受父元素字体大小影响，直接按设定值显示。
适用场景：
需要精确控制尺寸的元素（如边框、图标）。
对响应式布局要求不高的固定尺寸设计。
定义：相对单位，基于 当前元素或父元素的字体大小 计算（如 1em = 当前元素 font-size 的值）。
特点：
相对继承：若当前元素未设置 font-size，则继承父元素的 font-size。
层级叠加：嵌套使用 em 时，尺寸会逐层按比例放大或缩小。
示例：
css复制body { font-size: 16px; } .child { font-size: 1.2em; /* 16px * 1.2 = 19.2px */ padding: 2em; /* 19.2px * 2 = 38.4px */ }适用场景：
需要根据上下文动态调整的尺寸（如段落间距、按钮内边距）。
响应式布局中适配不同屏幕尺寸（通过修改根字体大小，整体缩放元素）。
| 特性 | px | em |
|---|---|---|
| 单位类型 | 绝对单位 | 相对单位 |
| 计算依据 | 屏幕物理像素 | 当前元素的 font-size |
| 继承性 | 无 | 继承父元素 font-size |
| 响应式适配 | 需手动调整 | 自动按比例缩放 |
| 适用场景 | 固定尺寸元素 | 动态适配布局 |
用 px：
需要严格固定尺寸时（如边框 border: 1px）。
不希望尺寸受父元素影响时（如图标大小）。
用 em：
希望尺寸随字体大小动态调整时（如行高 line-height: 1.5em）。
实现响应式布局（结合媒体查询调整根字体大小）。
定义：基于 根元素（<html>）的 font-size 计算（如 1rem = 16px，默认根字体为 16px）。
优势：避免 em 的层级嵌套问题，更适合全局响应式布局。
css复制html { font-size: 16px; } .box { width: 10rem; /* 16px * 10 = 160px */ }px 是“刚性”单位，适合固定尺寸；
em 是“弹性”单位，适合动态适配；
根据场景选择单位，结合 rem 能更高效地实现响应式设计。