px :px 是像素, 是相对长度单位, 是相对于显示器屏幕分辨率而言的. px 的特性是属于绝对数值, 它不受外围单位影响.
em :em 是相对的数值单位, 它会受到外围的文字大小所影响, 而 1em 即是 1 倍的文字大小, 1.5em 也就是 1.5 倍的文字大小. 它的单位长度是根据元素的文本垂直长度来决定的, 可以作用在 width,height,lineheight,margin,padding,border 等样式的设置上.
rem :rem 是相对单位, 是于 html 根元素, 直白点就是相对于 HTML 元素字体大小的单位
优点: 这个单位集相对大小和绝对大小的优点于一身, 通过它既可做到只修改根元素就成比例地调整所有字体大小, 又可以避免字体大小逐层复合的连锁反应.
fr : 是一个自适应单位, fr 单位被用于在一系列长度值中分配剩余空间, 如果多个已指定了多个部分, 则剩下的空间根据各自的数字按比例分配.
来源: http://www.bubuko.com/infodetail-2805798.html