这是我参与更文挑战的第13天，活动详情查看更文挑战

单位是前端开发中很重要的一个元素，我们的CSS中至少有10个不同的度量单位，每个单位都有自己的特定用途，在不同的情况使用不同的单位，可以让你的网页在各种设备中更加灵活，下面一起来看看这些单位分别是什么吧！

绝对长度单位

绝对单位是物理世界中实际测量值的数字表示，这些单位与屏幕大小或其分辨率无关；

绝对单位中使用最广泛的是像素 (px)。一个像素通常被理解为屏幕上的一个点。它是最小的计量单位，通常用作其他单位的基准。

.w1{
    height: 0.4in;
    background:#FFCCCC;
}
.w2{
    height: 10mm;
    background:#FFCC99;
}
.w3{
    height: 1cm;
    background:#FFCC66;
}
.w4{
    height: 37.8px;
    background:#CCFF99;
}
.w5{
    height: 2.4pc;
    background:#CCFF66;
}
.w6{
    height: 28.8pt;
    background:#CCFF33;
}
复制代码

相对长度单位

相对单位没有固定值。它们的值相对于其他一些预定义的值或特征。由于我们可以将它们的宽度、高度、字体大小等与其他一些基本参数相关联，因此相对单位可以轻松地调整元素的大小。

相对字体单位

ex和ch

ex在开发中很少使用，1ex等于小写字母“x”的高度，但不同字体x的高度可能不同。1ex=0.5em；

p {
  font-size: 2ex;
}
复制代码

ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值。

p {
  margin: 2ch;
}
复制代码

em

em 单元的值等于基本元素或父元素的字体大小。em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size；若用于其他属性，相对于本身元素的font-size。
例如，如果父元素的字体大小是20px，那么对于所有直接的子元素，1em 的值将计算到20px。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
如果在body选择器中声明Font-size=62.5%则1em=10px。

问题：

em 会层层继承父元素的或自己的字体大小，很容易造成字体大小的混乱，从下图可一看到，border都是1em，但是因为字体大小不同，em显示的大小也不同的。

<div class="box">
    第一层
    <p>
        第二层
         <span>
        第三层
    </span>
    </p>
</div>
复制代码

html{ 
    font-size: 40px;
}
div {
    border: 1em solid #FFCCCC;
}
p{
    font-size: 30px;
    border: 1em solid #FFCC66;
}
span{
    font-size:14px;
    border: 1em solid #CCFF33;
}
复制代码

rem

rem是相对于根元素html的font-size属性的计算值;

只要html的font-size大小不变，1rem所代表的font-size大小就不会变，rem只取决于html的font-size

同样是上面的示例，把em改成rem，可以看到border的大小都是一样的。

html{ 
    font-size: 40px;
}
div {
    border: 1rem solid #FFCCCC;
}
p{
    font-size: 30px;
    border: 1rem solid #FFCC66;
}
span{
    font-size:14px;
    border: 1rem solid #CCFF33;
}
复制代码