如果元素是根元素（<html>），它的包含块是视口（viewport）提供的初始包含块（initial containing block），初始包含块任何时候都被认为是有高度定义的，且等于视口高度。所以，<html>标签的高度定义百分比总是有效的，而如果你希望在<body>里也用高度百分比，就一定要先为<html>定义明确的高度。这就是为什么在之前的固定页脚一文中，有html, body{height:100%;}这样的写法。
margin & padding
这2个属性属于混合属性，也通过一个例子说明：
可以分析得到，对于margin和padding，其任意方向的百分比值，参照都是包含块的宽度。
为什么会多个方向都取包含块的宽度作为参照呢？在我看来，包含块的宽度在块布局的排版中是最有用的（想象一下word里输入文字，到宽度边缘后换行的场景），对应的，水平方向的内外边距一定要参照包含块的宽度。再考虑垂直方向的内外边距，它们如果不和水平方向取相同的参照物，就会因为不一致而很难使用。所以，总体来说，统一以包含块的宽度作为参考，会具有相对最好的可用性。
严格地说，参照是包含块的宽度，是在样式属性writing-mode为默认值时的情况。不过这个属性极少被用到，所以在此不做考虑。
border-radius
你也许见过有人用下面的代码来让一个矩形变成刚好的圆形（请体会这个“刚好”）：
CSS Code复制内容到剪贴板
.circle{border-radius:50%;}
对此的解释是，为一个元素的border-radius定义的百分比值，参照物是这个元素自身的尺寸。也就是说，假如这个元素宽是60px，高是50px（border-box的尺寸），那么border-radius:50%的结果等同于border-radius:30px/20px;。
如果你还疑惑这里带/的圆角写法，请查看MDN对border-radius的说明。
background-position
background-position的初始值就是百分比值0% 0%。下面是一个使用示例：
background-position的百分比值，取的参照是一个减法计算值，由放置背景图的区域尺寸，减去背景图的尺寸得到，可以为负值。对照上面的示例，思考一下，应该可以感受到，以这个减法计算值为参照的话，正好可以符合我们感官上对背景图位置的理解。
这个属性包括水平位置和垂直位置，它们分别参照的是宽度减法计算值和高度减法计算值。
你可能注意到了上面示例的最后一个竟然写了4个值（一般都只用2个值）。关于它的意义，请查看W3C的background-position。
font-size
参照是直接父元素的font-size。例如，一个元素的直接父元素的font-size是14px，无论这个是直接定义的，还是继承得到的，当该元素定义font-size:100%;，获得的效果就是font-size:14px;。
