《二》CSS 中常用的单位

CSS 中的单位整体上可以分为两类：绝对长度单位和相对长度单位。

绝对长度单位：

绝对长度单位与其他任何东西都没有关系，总是相同的大小。

除了常用的 px 像素外，还有 pt 点、in 英寸、cm 厘米、mm 毫米等。

px：

px：像素。在进行移动 Web 开发时，当需要设置固定宽高或字体大小时可用。

相对长度单位：

相对长度单位是指相对于其他一些东西来计算大小。

百分比 %：

百分比 %：在进行移动 Web 开发时，可用来进行布局。

为不同属性设置百分比有不同的参照值。

1. 子元素的 width、height：子元素 width 的百分比是相对于父元素的 width，子元素 height 的百分比是相对于父元素的 height。
2. top、bottom 和 left、right：子元素的 top、bottom 的百分比是相对于父元素的 height，子元素的 left、right 的百分比是相对于父元素的 width。
3. padding、margin：子元素的 padding、margin 都是相对于父元素的 width，和父元素的 height 无关。
4. font-size：子元素 font-size 的百分比是相对于父元素的 font-size。
5. line-height：子元素 line-height 的百分比是相对于自身的 font-size。
6. background-size、border-radius，translate：相对于自身的 width。

em：

em：相对于自身的字体大小，1em = 自身字体的大小。在进行移动 Web 开发时，一般用来控制行首的缩进，不用来进行布局。

由于 font-size 本身就是可继承的属性，字体大小可以是从其父元素或者组件元素继承而来。因此，如果用 em 设置字体大小，其实还是相对于自身的字体大小，相当于是先从父元素或者祖先元素处继承而来，然后 em 相对于自身的字体大小计算后进行了覆盖。

rem：

rem：相对于根元素的字体大小，1rem = 根元素 html 的字体大小。在进行移动 Web 开发时，可用来进行布局。慢慢在被淘汰。

vw、vh：

vw、vh：相对于视口的大小，1vw = 可视窗口的宽度的 1%，1vh = 可视窗口的高度的 1%。在进行移动 Web 开发时，可用来进行布局。开发中一般会使用 vw，vh 使用较少。

在移动端的时候，无论是竖屏或者横屏，vw 永远都是针对于横向的。

vmax：当前 vw 和 vh 中较大的一个值（假设 vw 比 vh 大，那么 vmax 就等于 vw）。
vmin：当前 vw 和 vh 中较小的一个值。

rem 慢慢在被淘汰，vw、vh 使用最多。