css-鲜为人知的css单位

css中的值和单位

数字

整数和实数（小数），整数和实数都可以是正数或者负数。

百分数

百分数总是相对于另一个值。

颜色

命名颜色：red，blue。。。
用RGB指定颜色：p.one{color:rgb(0%,20%,20%)}
十六进制RGB颜色：h1{color: #FF0000} /*re*/

长度单位

绝对长度单位

比较少用，主要有英寸（in）,厘米（cm），毫米（mm），点（pt）,派卡（pc）。

相对长度单位

em，ex，px

鲜为人知的css单位

rem

em

em单位被定义为当前字体大小，比如在body上设置一个字体的大小，那么在body元素内的任何子元素的em值都等于这个字体大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      <!--div将有一个2em的font-size。他是所继承的字体的2倍。-->
        div {
            font-size: 2em;
        }
    </style>
</head>
<body style="font-size: 10px">
<div>
    111(2*10px)
    <div>
        222(2*2*10px)
        <div>
            333(2*2*2*10px)
        </div>
    </div>
</div>
</body>
</html>

像上述例子，每个元素内部都级联em定义的字体大小，，则每个div从他们的父节点继承字体大小，带给我们之间增加的字体大小。显示如下：

rem

虽然在某些情况下可能需要这个，但是通常你可能想居于一个唯一的度量标准来按比例缩放。在这种情况下，应该使用rem。rem中的r代表root，这等同于font-size基于根元素进行设置；在大多数情况下，根元素为html元素。还是上面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            font-size: 2rem;
        }
    </style>
</head>
<body style="font-size: 10px">
<div>
    111(2*10px)
    <div>
        222(2*10px)
        <div>
            333(2*10px)
        </div>
    </div>
</div>
</body>
</html>

对网络布局的好处：rem不是只对定义字体大小有用，比如，你可以使用rem把整个网格系统或者ui样式库基于HTML根元素的字体大小上，然后再特定的地方使用em比例缩放。这将带来更加可预测的字体大小和比例缩放。

1	.container { width: 70rem; // 70 * 14px = 980px }

vh和vw

响应式网页设计技术很大程度上依赖于比例规则。然而，css比例不总是每个问题的最佳解决方案。css宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或者高度，而不是父元素的宽度将会怎么样。这正是vh(viewport-height)和vw(viewport-weight)。

vh等于viewport高度的1/100。例如浏览器的高是900px，1vh的值为9px。同理，如果窗口宽度为750px，则1vw的值为7.5px。

ex 和 ch

ex和ch单位，与em和rem相似，依赖于当前字体和字体大小。然而，与em和rem不同的是，这两个单位只也依赖于font-family，因为它们被定为基于特殊字体的法案。

vmin 和 vmax

vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。

reference

七个你可能不了解的CSS单位