CSS中的单位

一、px

绝对单位，页面按精确像素展现

二、em

em 是相对长度单位，是相对于字体大小这个属性来计算的。参考的是父节点字体的大小，若是自身定义了字体大小 font-size 则参考自身的字体大小，若是父节点和自己都没有定义字体大小，则参考浏览器默认字体大小，浏览器的默认字体大小是16px。

整个页面内1em不是一个固定的值。

好比说：能够在body标签声明 font-size: 62.5%；body下的子元素好比 div 若是声明 width: 1em ，则宽度为 10px，该 div 下的 span 字体大小声明为 font-size: 0.5em ，则此时span的字体大小是基于div的，16*62.5*1*0.5 = 5px

三、rem

rem 也是相对长度单位，可是该单位相对于 em 就避免了重复计算，由于它相对的就只是HTML根元素

html {
  font-size: 62.5%;  
}
div {
  font-size: 1rem;
  width: 10rem;
}
span {
  font-size: .5rem;
}

不一样设备的默认字体大小可能不同，经过相对长度单位设置的字体大小能够随着默认字体大小的改变而发生改变