css 单位和值

一、绝对长度单位

常用的绝对长度单位：

px pixel 是 CSS 中最常用的长度单位，可以用来指定字体大小，元素的宽度、高度、边框、内边距，外边距的大小等等, 它是一个虚拟长度单位，是计算机系统的数字化图像长度单位，
pt point，是一个标准的长度单位，1pt ＝ 1/72 英寸，用于印刷业，非常简单易用，
in 表示英寸，是一个物理单位，在 CSS 中被直接映射成为 px;
cm 表示厘米，在生活中常用的单位，同样被映射为 px;
mm 表示毫米，与 cm 类似;

其中，如果 px 要换算成物理长度，需要指定精度 DPI，px = pt * 72 / DPI

ppi 和 dpi

dpi 最初用于衡量打印物上每英寸的点数密度。DPI 值越小图片越不精细。当 DPI 的概念用在计算机屏幕上时，就应称之为 ppi。同理： PPI 就是计算机屏幕上每英寸可以显示的像素点的数量。因此，在电子屏幕显示中提到的 ppi 和 dpi 是一样的，ppi 是指屏幕上的像素密度，

其计算方法为： ppi= 屏幕对角线上的像素点数/对角线长度 = √ （屏幕横向像素点^2 + 屏幕纵向像素点^2）/对角线长度，
以小米 2s 为例，该屏幕分辨率为 720px*1280px，4.3 英寸。则点密度为 √ (720^2 +1280^2) /4.3 = 342ppi

    所以在小米 2s 上
    1px = 1pt *  72/342 = 0.21pt
    1pt  = 1px *342/72 = 4.75px
    也就是说在在小米2s上一个点大概是4.75px

二、百分比长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位.

em 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小
rem 根元素的字体大小
vw 视窗宽度的 1%
vh 视窗高度的 1%

em 被定义为相对于当前对象内文本的字体大小：

如果父元素的字体大小为 16px，则所有直接子元素中的 1em 值将计算为 16px。基于基本单元的知识，可以很方便的增大或减小子元素的字体大小。这里的值不需要是整数
使用 em 可以轻松地将各种元素的字体大小保持在固定比例,
另外有一点需要注意：如果想要通过 em 设置当前元素的大小值，并且不是相对于直接父元素，而是相对父元素的父元素或者根元素，就会变得很复杂，因为每一层都要进行计算

<div class="parent">
    <div class="child1">
        <div class="child2"></div>
    </div>
</div>

.parent {
    font-size: 20px;
}

.child1 {
    font-size: 1.5em;
}

.child2 {
    font-size: 1.2em;
}

那么就需要经过计算: child1 的字体大小为 20 x 1.5 = 30px , 而 child2 的字体大小就等于 20 x 1.5 x 1.2 = 36px

rem 也是一个相对单位，与 em 的不同点在于 rem 的长度总是相对于根元素, 而不是像 em 使用级联的方式来计算尺寸。这种单位使用起来就简单很多
同样是上面的例子，不过使用的单位是 rem

<div class="parent">
    <div class="child1">
        <div class="child2"></div>
    </div>
</div>

.parent {
    font-size: 20px;
}

.child1 {
    font-size: 1.5rem;
}

.child2 {
    font-size: 1.2rem;
}

vh and vw

响应式 web 设计离不开百分比。但是，CSS 百分比并不是所有的问题的最佳解决方案。CSS 的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？这就是 vh 和 vw 单位为我们提供的。

1vh 等于 1/100 的视口高度。栗子：浏览器高度 900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度未 750， 1vw = 750px/100 = 7.5 px。

可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行 CSS 代码就实现同屏幕等高的框。