【CSS】单位

1. px（像素）：像素是相对于显示器分辨率⽽⾔的，是⼀个固定的单位。1px 可以被理解为显示器上的⼀个物理像素点，其⼤⼩和颜⾊由显示器⾃身控制。
2. em（相对⻓度单位）：em 是相对于⽗元素的字体⼤⼩的单位，当⽗元素没有设置字体⼤⼩时，em 相对于浏览器的默认字体⼤⼩。
3. rem（相对⻓度单位）：rem 同样是相对⻓度单位，但相对于根元素（即 html 元素）的字体⼤⼩。
4. %（百分⽐）：百分⽐是相对于⽗元素的宽度、⾼度、字体⼤⼩等的百分⽐。
5. vw、vh（视⼝单位）：vw 和 vh 分别代表视⼝的宽度和⾼度的百分⽐。
6. pt（点）：1pt 等于 1/72 英⼨，常⽤于打印⻚⾯。
7. em 和 rem 的区别：em 和 rem 都是相对⻓度单位，但 em 的⼤⼩是相对于其⽗元素的字体⼤⼩，⽽ rem 的⼤⼩则是相对于根元素（即 html 元素）的字体⼤⼩。因此，rem 更加稳定，能够更好地控制⻚⾯布局和字体⼤⼩。

1 个 CSS 像素并不⼀定等于 1 个物理/设备像素 dp，物理像素就是真正构成设备显示屏的⼀个个像素点。早期，1 个 px 等于 1 个 dp，但⾼清 2 倍屏、3 倍屏的出现，导致⼿机屏幕的尺⼨没有变化，屏幕的分辨率却提⾼了⼀倍或⼏倍，即同样⼤⼩的屏幕上，像素多了⼀倍。⽐如，当设置某个元素的属性为 1px 时，我们期望的是该属性在屏幕上占据 1 个物理像素，这在普通屏幕上当然是满⾜的，但在 2 倍屏上，1 个 CSS 像素对应的却是 4 个物理像素点，这也就导致了移动端中的 1px 边框会偏粗。注意，px 单位的值必须是整数。