CSS的值与单位 em、rem详解

绝对长度单位：

常用：px
不常用：cm、mm、in、pc、pt

相对长度单位：

常用：em、rem、vw、vh
不常用：ex、ch、lh、vmin、vmax

em:在font-size中使用是相对父元素的字体大小，在其他属性中是相对于自身的font-size，如width、height

代码演示：

<div class="grand">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

.grand {
    font-size: 24px;
    width: 10em; /*240px*/
    height: 10em;
    background: #000;
}
.parent {
    font-size: 0.8em; /*19.2px(24x0.8)*/
    width: 5em; /*96px(19.2x5)*/
    height: 5em;
    background: #f00;
}
.child {
    font-size: 0.8em; /*15.36px(19.2x0.8)*/
    width: 4em; /*61.44px(15.36x15.36)*/
    height: 4em;
    background: #0f0;
}

结果如图：

可见font-size的单位为em时，只是相对于父级的font-size，其他属性则是相对于自身font-size。 但是如果子级不设置font-size时，结果就是相对于父级的font-size，如果父级没有设置font-size，则逐级向上查找，直到根元素，如果根元素没有设置font-size，则使用浏览器的默认字号。

代码演示：

<div class="grand">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

.grand {
    font-size: 24px;
    width: 10em; /*240px*/
    height: 10em;
    background: #000;
}
.parent {
    width: 5em; /*120px(24x5)*/
    height: 5em;
    background: #f00;
}
.child {
    width: 4em; /*96px(24x4)*/
    height: 4em;
    background: #0f0;
}

结果如图：

rem:根元素的字体大小，rem中的r意思是root

浏览器的默认font-size是16px(1rem)。如果某元素的某属性设置为10rem，换算成px就是160px。如果设置浏览器的font-size为24px，则10rem即为24x10 = 240px。

vw:视窗宽度的1%

vh:视窗高度的1%

height:100vh是相对于屏幕，height:100%是相对于父级的height，如果父级没有设置height，则不生效，不会向上查找。