3.2 CSS单位应用

在定义CSS规则时，经常遇到对CSS属性值选择单位的问题。在讲述CSS属性设置之前，下面先对CSS中常用的长度、百分比和颜色单位加以介绍。

3.2.1 长度单位

长度单位是网页设计中最常用的单位。通过CSS可以精确地设置页面元素的高度、宽度、上边距、下边距、左边距、右边距、边框粗细、字号大小，所有这些都离不开长度单位的应用。长度单位可以分为绝对长度单位和相对长度单位两种。

1.绝对长度单位

CSS中常用的绝对单位有：cm（厘米）、mm（毫米）、in（英寸）、点（pt）、pc（派卡）。这些单位之间的换算关系如下。

1in=2.54cm

1cm=0.3937in

1mm=0.1cm

1pt=1/72in=0.3478mm

1pc=12pt=1/6in

2.相对长度单位

相对长度单位有：px（像素）、em和ex。

（1）px单位：表示像素。像素是相对于显示器屏幕分辨率而言的。例如，Windows用户所使用的分辨率一般是96px/in，而Mac的用户所使用的分辨率一般是72px/in。一般建议的像素参考值是：在一个90dpi的显示器上，从距离显示器28in处看一个像素的视角应该不小于0.0227°。

（2）em单位：表示字体高。em单位相对于当前元素内文本的字体大小，具体来说em代表的高度就是大写字母M或H的高度。若当前未设置行内文本的字体大小，则相对于浏览器的默认字体大小。假设h1元素的字体大小为1.5em，若把页面默认字体大小为9pt，则显示h1元素时所用的字体大小为9pt×1.5=13.5pt；若把页面默认字体大小为12pt，则显示h1元素时所用的字体大小为12pt×1.5=18pt。

（3）ex单位：表示字母x的高度。此高度通常为字体大小的一半。若当前未设置行内文本的字体大小，则是相对于浏览器的默认字体大小。

3.2.2 百分比单位

百分比也是一个比较常用的单位，它用百分号“%”表示。百分比值是相对于另一个值而言的，这个参照值可以是长度单位或其他单位。对于每个可以使用百分比单位的属性，这个参照值通常就是该元素的字体大小。

例如：

        p{line-height:150%}

其中line-height属性指定段落文本的行高。若段落文本的字体大小为12pt，则行高就是12pt×150%=18pt。

3.2.3 颜色单位

在CSS中，有以下三种颜色单位。

（1）#RRGGBB：三个两位十六进制正整数。这些正整数的取值范围为00～FF。

（2）rgb（R,G, B）：其中R、G、B分别表示红、绿、蓝的正整数或百分数。以上三个参数，正整数值的取值范围为0～255；百分数值的取值范围为0.0%～100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。

（3）颜色名称：不同的浏览器会有不同的预定义颜色名称。IE浏览器预定义的颜色名称和相应的颜色值在表3-1中列出。

表3-1 IE浏览器的预定义颜色名称