CSS 单位总结
经典真题
px 和 em 的区别？
CSS 中有哪些单位？
首先，在 CSS 中单位分为两大类：绝对单位和相对单位。
绝对长度单位
绝对单位是固定的值，不会因为其他元素的大小而改变。常见的绝对单位有：
| 单位 | 名称 | 等价换算 |
|---|---|---|
| cm | 厘米 | 1cm = 96px/2.54 |
| mm | 毫米 | 1mm = 1/10th of 1cm |
| Q | 四分之一毫米 | 1Q = 1/40th of 1cm |
| in | 英寸 | 1in = 2.54cm = 96px |
| pc | 十二点活字 | 1pc = 1/16th of 1in |
| pt | 点 | 1pt = 1/72th of 1in |
| px | 像素 | 1px = 1/96th of 1in |
这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm。
唯一一个经常使用的值，估计就是 px。
相对长度单位
相对长度单位相对于其他一些东西，比如父元素的字体大小或者视图端口的大小。
使用相对单位的好处是，经过一些仔细的规划，我们可以使文本或其它元素的大小与页面上的其他内容相对应。
下面是 web 开发中一些最有用的单位：
| 单位 | 相对于 |
|---|---|
| em | 在 font-size 中使用是相对于父元素的字体大小 |
| 在其它属相中是相对于自身的字体大小，如 width | |
| ex | 相对于小写字母 x 的高度 |
| ch | 相对于数字 0 的宽度 |
| lh | 相对于当前元素的 line-height |
| rem | 始终相对于根元素（html）的字体大小 |
| vw | 相对于视口（viewport）的宽度。1vw 等于视口宽度的 1% |
| vh | 相对于视口（viewport）的高度。1vh 等于视口高度的 1% |
| vmin | 相对于视口（viewport）的较小尺寸。1vmin 等于视口较小尺寸的 1% |
| vmax | 相对于视口（viewport）的较大尺寸。1vmax 等于视口较大尺寸的 1% |
上面的单位中，常用的有 em、rem、vw、vh。
接下来看一看 em 和 rem 的区别。
em 和 rem 相对于 px 更具有灵活性，更适用于响应式布局。
它们的区别用一句话概括就是：
em 是相对于自身字体大小的单位，而 rem 是相对于根元素（html）字体大小的单位。
真题解答
px 和 em 的区别？
px 即 pixel 像素，是相对于屏幕分辨率而言的，是一个绝对单位，但是具有一定的相对性。因为在同一设备上每个设备像素所代表的物理长度是固定不变的（绝对性），但在不同设备间每个设备像素所代表的物理长度是可以变化的（相对性）。
em 是相对长度单位，具体的大小要相对于父元素来计算，例如父元素的字体大小为 40px，那么子元素 1em 就代表字体大小和父元素一样为 40px，0.5em 就代表字体大小为父元素的一半即 20px。