css字体单位：px、%、em、rem对比

2016-10-09 本文已影响0人 2016_18点

unit	explain
px	绝对单位，像素px是相对于显示器屏幕分辨率而言的。
em	em是相对长度单位。参考物是父元素的font-size，具有继承的特点。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem	是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
百分比	百分比单位更像“em”单位,除了一些根本性的差异。首先,当前的字体大小等于100%(比如12 pt = 100%)。当使用百分比单位,你的文字在移动设备上仍然保持完全的可伸缩性和可访问性。

注意

【em】如果在** font-size **上使用em这个单位，应该乘以父元素的字体大小，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)。用在 font-size 之外的属性上，则应该乘以元素自身的字体大小
【%】如果某个元素设置了百分比的属性，则后代元素继承的是计算后的值 ，而不是原百分比。
乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width eg：padding-top:20%; 20%指的是父元素宽度的20%
乘以包含块的高度 top, bottom, height, max-height, min-height
乘以元素的字体大小 line-height
乘以元素的行高 vertical-align
【包含块】
包含块类型：