<body>
<div id="container">
<h1>This is a Title</h1>
<p>This is body text at default base size.</p>
</div>
</body>
我们可以设置一个基准关键字 值， 以及一个 有较大百分比值的 <h1> 对象：body {
font-size: small;
}
h1 {
font-size: 150%;
}
但是如果我们感觉small值相对于我们的喜好还偏大了一点(在浏览器的默认设置情 况下查看时)，我们可以通过给 #container 这个包围了页面上所有文字的对象设置一 个百分比，来让这个基准值实际上变小一些：
body {
font-size: small;
}
h1 {
font-size: 150%;
}
#container {
font-size: 95%;
}
如图 1 - 9 所示，文字从默认大小减下来了一些，同样也影响到了大标题文字。
在嵌套使用百分比值时您得谨慎些，在上面的例子中，我们为整个页面设定了一 个关键字值 small，然后通过使用 container <div>来将这个值减小为 small 的95%。此后，当再为 #container 里面的对象设定百分比值时，有些事情可能会令人糊涂 。
例如，前面我们声明了所有的<h1>对象应该被设定为 150%。但因为<h1>对象在 文档树中要低一些—— 它被包含在 #container 中，因此在页面层级中位于 #con- tainer 之下—— 所以我们真正得到的并不是初始值 small 的 150% 大小，而是 small 的95 % 大小的 150 %。关于页面文档树中对象的嵌套如何影响百分比值，可见图 1- 10 。
这是当对象嵌套时，百分比如何计算的示意图
困惑了？如果把 small 换成一个数值可能会帮助您理解。假设给<body>设定的文字大小基准值等于10(而不再是small)，那么#container以内的任何东西都等于 9.5(即 10 的 95%)。大标题<h1>在 #container 的里面，我们 指定了一个 150% 的 font-size 给它。我们本来的基准值 10 的 150% 是 15，但因为<h1>的父对象是 #container，所以计算过程就是 9.5 的 150% 等于 14.25。当选择嵌 套的层级越深时，百分比的计算也愈加复杂。现在抛开令人头晕的算术，我们这里想 强调的是，当声明新的百分比值时，要先看看是不是已经设定了任何父对象的百分 比。就我个人而言，我在构建页面的时候嵌套很少超过两层，但是了解了嵌套层级对 百分比值的影响，可以在面对文字大小并不是如您所想的结果时，不至于太困惑。
注意：
当嵌套小于100%的百分比时的一个额外警告：一旦用户通过改变浏览器设置进一步减小文字的话，可能会导致页面文字小到难以辨认。 换句话说，如果在设计页面时考虑的是默认浏览环境，并使用了一个在浏览器默认设置下文字非常小不过仍能看清的百分比值，那么当用户的浏览器所设置的文字大 小为比默认值小的时候，这个百分比值下的文字就可能没法看清楚了。记住，要在各种浏览器和文字大小的场景下做测试，不管设置什么样的关键字－ 百分比组合，都要确保文字总是可读的。
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
