CSS 中经常会出现百分比单位，搞清它们的基数是件很重要的事情。我查了查 CSS2.1 标准，在此整理一下：

百分比的基数

乘以包含块的宽度

margin, padding, left, right, text-indent, width, max-width, min-width

乘以包含块的高度

top, bottom, height, max-height, min-heightposition 为 absolute、relative、或者 fixed 的祖先元素。对固定定位的元素，它的包含块是视口（viewport）。具体可以参考 这篇文章。

乘以元素的字体大小

line-height

乘以元素的行高

vertical-align

background-position

background-position 分别设置水平方向和垂直方向上的两个值，如果使用百分比，那么这个位移会同时应用于元素和图像。例如 background-position: 50% 50% 会把图片的（50%, 50%）这一点与元素区域的（50%, 50%）对齐，相当于设置了 background-position: center center。同理 background-position: 100% 100% 相当于 background-position: right bottom。如果只设置一个值，那另一个值自动设为 50%。


font-size

font-size

其他字体单位

顺便理一理其他的字体单位吧，有些虽然不太常用，但可以了解。有两个相对单位是：

em

  • ——等于当前的字体大小。如果在 

font-size

  •  上使用这个单位，则基数是父元素的字体大小。用在 

font-sizeex

  • ——相当于字体中的”x”的高度。

以下都是绝对单位：

in

  • ——英寸（inch），相当于 

2.54cm

  • 。

cm

  • ——厘米（centimeter）。

mm

  • ——毫米（millimeter）。

pt

  • ——点（point）。

1pt

  •  相当于 

1inpc

  • ——皮卡（pica）。

1pc

  •  = 

12pt

  • 。

px

  • ——像素（pixel unit）。如果系统设置分辨率为 96 dpi，那么 

1px

  •  = 

0.75pt

  • 。

百分比的继承

如果某个元素设置了百分比的属性，那么子元素继承的是计算后的值。例如：


p { font-size: 10px }
p { line-height: 120% } /* 120% of 'font-size' */


<p> 的子元素继承到的值是 line-height: 12px，而不是 line-height: 120%。