<-Home
css 单位
我们日常所申明的css 规则都可能包含：
- css 的选择器
- css 的属性
- css 的属性值
- css 的属性值单位
css 的值
css 的属性值有很多种，常见的包括 数值、字符串、百分比、关键字、函数、颜色、坐标位置等；同时 css 的值可以带单位也可以不带单位；
css 的单位
上面提到，css的值可以带单位也可以不带单位；而css的单位对css的值是有一个直接的影响的。css的单位会直接影响 css的最终计算，css 中的单位有如下的关系图：
下面的图对css 单位做了一个更详细的分类：
绝对单位
绝对值的css 单位不受任何屏幕大小或者字体大小的影响，这些单位会受屏幕的分辨率影响而导致表现不同，取决于屏幕的DPI（Dots Per Inch 每一英寸的点数）；常见的绝对值单位有 px、pt、pc、in、cm、mm等；
像素单位被认为是许多其他单位的测量基础。它提供了各种设备中一致的结果。也被认为是最好的设备像素，而这种像素长度和你在显示器上看到的文字屏幕像素元关。因为px实际上是一个按角度度量的单位，即像素角度。很多时候，px也常被称为 CSS 像素。它是一个绝对单位，但也可以被视为相对单位，为什么这么说呢？那是因为像素单位相对的是设备像素。在同一样的设备上，每1个 CSS 像素所代表的物理像素是可以变化的（即 CSS 像素的第一方面的相对性）；在不同的设备之间，每1个 CSS 像素所代表的物理像素是可以变化的（即 CSS 像素的第二方面的相对性）。
常见的css 绝对单位之间是可以进行换算的：
- 1 in = 96 px
- 1 cm = 37.8 px
- 1 mm 3.78 px
- 1 in = 72 pt
- 1 in = 6 pc
- 1in = 96px = 72pt，那么1px = 72 / 96 = 0.75pt
- 1in = 96px = 6pc，那么1px = 6 / 96 = 0.0625pc
相对单位
-
em 每个浏览器都有一个默认的font-size字体大小，而这个值通常是16px（用户未手动修改过浏览器字体），这也是1em=16px 的原理所在；
1em = 16px = 0.17in = 12pt = 1pc = 4.mm = 0.42cm
- rem rem 相对而言没有那么复杂，它仅仅根据跟元素html 的font-size 来计算； 很多时候我们可以把rem 看成是em 的替代品，特别是在font-size 的运用上；但是rem和em有一个很大的区别，任何为1rem的元素的计算出来的值都是根据元素 html 的对应的font-size的大小
- vw/vh/vmin/vmax