在 CSS 中，选择合适的单位对于实现响应式设计和易用性至关重要。
px、em 和 rem 是最常用的三个长度单位，它们的主要区别在于参考基准的不同。
1. px (Pixel - 像素)
px 是一个绝对单位（在屏幕显示器上）。它代表屏幕上的一个物理像素点。
特点：固定大小，不会随浏览器设置或父元素字体大小改变。
优点：精确、容易控制，适合需要"像素级"对齐的场景（如边框线、小图标）。
缺点：缺乏灵活性，不便于响应式布局。如果用户在浏览器中放大字体，使用 px 定义的布局可能不会随之调整。
2. em (Relative to Element - 相对单位)
em 是一个相对单位，它的参照物是当前元素或父元素的字体大小 (font-size)。
计算规则：
如果用在 font-size 上，参照的是父元素的字体大小。
如果用在其他属性上（如 width、padding、margin），参照的是当前元素自身的字体大小。
缺点：复合叠加效应。如果嵌套多层且都使用 em，计算会变得非常复杂。
举例：如果父元素是 20px，子元素设置 font-size: 1.5em;，那么子元素的实际大小就是 。
3. rem (Root em - 根相对单位)
rem 也是一个相对单位，但它只参照根元素（即 标签）的字体大小。
计算规则：无论元素嵌套多深，1rem 始终等于 的 font-size。
优点：
可预测性高：避开了 em 的叠加嵌套问题。
响应式友好：只要修改 html 的字体大小，整个页面的 rem 布局都会等比例缩放。
默认值：大多数浏览器的默认根字体大小是 16px，因此默认情况下 1rem = 16px。
核心区别对比表
单位
类型
参照物
适用场景
px
绝对单位
物理屏幕像素
边框、阴影、不需要缩放的元素
em
相对单位
当前/父元素字体大小
局部组件缩放（如按钮边距随文字大小变化）
rem
相对单位
根元素字体大小
整体页面布局、间距、响应式排版
总结与建议
首选 rem 用于排版和布局：这能确保用户调整浏览器字体大小时，你的网页能优雅地缩放。
次选 px 用于固定细节：例如 1px 的边框线，不希望它因为缩放而变得模糊或消失。
少选 em 仅用于局部：当某个元素的 Padding 或 Margin 必须随着该元素文字大小同步缩放时（例如自适应按钮），才考虑使用 em。
一个小技巧：为了方便计算，很多开发者会将 html 的字体大小设为 62.5%（即 ）。这样在写代码时，1.4rem 就直接对应 14px，简单直观。