em和pt - CSS中被忽略的单位

  前言

    CSS一般来说不太被重视,但是里面的东西都繁琐,须要大量的时间和经验的积累,平时咱们定义大小或者宽高使用的都是px单位,也就是像素.CSS所提供的单位不止px一种,还有em和pt.

  正文

    咱们平常使用最多的是px,也就是像素,它是相对于显示器分辨率的而言的相对长度.可是一些网页放大功能,尤为是在IE下没法放大.em是一个什么样的单位呢?

按照CSS2.0的定义,em也是一个相对单位,相对于当前对象内文本大小.若是当前对象内文本大小未被设置,则按照浏览器默认大小.

    若是按照这么说,咱们能够理解,px是相对于显示器的,em是相对于当前文本的,因此px对于咱们来讲就是绝对单位了,而em则是相对的大小.一般来说若是你的浏览器未经调整,那么默认的字体高度是16px,因此这里的16px = 1em.

  em

    若是你们关注过Bootstrap的CSS的话,常常能够看见这种定义font-size: 62.5%;这个其实就是为了em的设置,以前说过了默认状况下16px = 1em.为了方便计算咱们一般能够在body中声明font-size:62.5%;这样的话就变成16px * 0.625 = 1em,也就是px只要除以10就能够换成em单位了.

    em没有固定的大小,是真正的相对单位,而且em会继承父元素的字体大小.这里尤其注意的就是em是有继承特性的!

  pt

    pt也就是point单位,这个单位咱们平时用到的更少了,坦白说这里也不太推荐你们使用,作个科普知道下就能够了.

    首先说明一下为何用的不多,由于pt单位主要实在印刷或者输出设备而言,它是一个绝对单位或者说物理单位.在传统印刷排版中1pt是1/72英寸,一般状况下9pt = 9 * 1/72 * 96(DPI) = 12px;这里涉及到DPI的概念因此很少说,你们对pt有个概念就行,如今通常状况下用px代替它.

    最后附一个网上找到的单位转换图,感谢原做者.