CSS 中经常会出现百分比单位，搞清它们的基数是件很重要的事情。我查了查 CSS2.1 标准，在此整理一下：
百分比的基数
乘以包含块的宽度
margin, padding, left, right, text-indent, width, max-width, min-width
乘以包含块的高度
top, bottom, height, max-height, min-height
对于包含块（containing block）这个概念，不能简单理解成就是父元素。分情况而言：如果元素为静态定位或者相对定位，包含块一般就是其父元素；但如果元素是绝对定位，包含块应该是离它最近的 position 为 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-size之外的属性上，则乘以元素自身的字体大小。ex——相当于字体中的”x”的高度。
以下都是绝对单位：
in——英寸（inch），相当于2.54cm。cm——厘米（centimeter）。mm——毫米（millimeter）。pt——点（point）。1pt相当于1in的 1/72。在分辨率为 72 dpi 的操作系统上，1px 就是 1pt。pc——皮卡（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%。