3.11  CSS长度单位

3.11  CSS长度单位

在CSS样式表中，我们经常会看到pt、px、em、ex、in等长度单位。在CSS样式表中，长度单位分两种：

相对长度单位，如px、em等。

CSS相对长度单位中的"相对"二字，表明了其长度单位会随着它的参考值的变化而变化，不是固定的。CSS相对长度单位如表3-1所示。

表3-1  CSS相对长度单位

绝对长度单位，如pt、mm等。

绝对长度单位是一个固定的值。比如我们常用的有mm，就是毫米的意思。CSS绝对长度单位如表3-2所示。

表3-2  CSS绝对长度单位

对于计算机的屏幕设备而言，像素（pixel）或者说px是一个最基本的单位，就是一个点。其他所有的单位都和像素成一个固定的比例换算关系。所有的长度单位基于屏幕进行显示的时候，都统一先换算成为像素的多少，然后进行显示。所以，就计算机的屏幕而言，相对长度和绝对长度没有本质差别。任何单位其实都是像素，差别只是比例不同。

CSS绝对长度单位是对于输出设备（output device）而言的。拿pt来说，这是一个在文字排版工具（Word、Adobe等）中非常常用的字体单位，不管你的显示器分辨率是1024像素×768像素，还是800像素×600像素，同一篇文档打印在纸面上的结果是一样的。

对于pt和px，我们来做一个测试，代码如下：

<p style = "font-size:20pt;">字体是20pt</p>
<p style = "font-size:20px;">字体是20px</p>

显示的效果如下所示：

字体是20pt

字体是20px