面试之css单位-px、rem、em

px:绝对单位。页面按照精确单位展示

em:相对单位。相对于父元素的fontSize（如果自身设置了fontSize，则按照自身的为准），会继承父元素的字体大小需要注意的是整个页面内的1em不是一个固定值

rem:相对单位。全称 root em,相对于根借点html的字体大小来进行计算，可以成比例的调整所有字体大小，也可以避免字体大小逐层复合的连锁反应。rem的计算规则如下

html {
    .font-size: 20px;
}
.btn {
    width: 6rem;
    height: 6rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    border-radius: .5rem
}

 此时根元素的字体大小是20px，那么对应的btn的宽度而言是6rem*20px = 120px，而说明20px = 1rem(根元素字体为20px的时候)；以移动端为例，设计图尺寸为640，某个盒子的宽度为384px，那么换算成rem的话，应该为384/640 = .6，由于根元素我们设置的是20px，那么此时384的font-size就是20*.6 = 12px，而盒子的宽度转换为rem的话就是0.6rem啦~

 

 

**也就是说，em是以自身父容器为参考对象的，而rem直接以HTML为参考对象的，在多层嵌套的情况下使用em很容易出现问题。