前端4-2-5：关于CSS 长度单位总结，有你就够了！

在CSS中以不少值是以长度作为值的，盒子模型的属性就是一些明显的值属性：width、height、margin、padding、border。除此之外还有很多的css属性的值同样也是长度值，像偏移量offset、box-shadow的大小或字体大小、间距等，在CSS中存在众多的长度单位，下面我们就来说一下长度单位以及它们的用途。

二、简单介绍

在CSS的长度单位分为两种：绝对长度 和 相对长度。

绝对长度：px、in、cm、mm、pt、pc
相对长度：em、rem、ex、vh、vw、vmin、vmax、%、fr

三、详细介绍

1、相对长度单位

px：表示像素，像素是相对于屏幕分辨率的，页面按照精确像素展示，不会因为其它元素的尺寸变化而变化，像素仍然是最典型的度量单位，例如：windows的用户所使用的分辨率96像素/英寸，而mac的用户所使用的分辨率一般是72像素/英寸，一般javascript语言里的单位就是使用的像素。

div {
  width: 200px;

in：英寸（inch）是一个物理度量文件，但是在CSS领域，英寸只不过被直接映射成像素罢了。（1in == 2.54cm == 96px）

div {
  width: 2in;
}

cm：厘米是比较熟悉有用的物理度量单位。它也映射成像素。（1cm == 37.8px）

div {
  width: 20cm;
}

mm：毫米是个小数量级的物理度量单位。（1mm == 0.1cm == 3.78px ）

div {
  width: 200mm;
}

pt：点（Points）也是物理长度单位。（1pt == 1/72in == 96/72px）

div {
  width: 20pt;
}

pc：派卡（Pica）和points一样，只不过（1pc == 12pt）。

div {
  width: 20pt;
}

2、绝对长度单位

em：em是一个相对单位，相对于当前对象内文本的字体尺寸，如当前对行内的字体尺寸未被人设置，则相对于浏览器的默认字体尺寸。
起初排版度量时是基于当前字体大写字母 M 的尺寸的，当改变font-family时，它的尺寸不会发生改变，但在改变font-size的大小时，它的尺寸就会发生改变，em 会继承父级元素的字体大小。(下面有关于 em 和 rem 的例子)
在没有任何CSS规则的前提下：（1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm）