<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%的百分比時的一個額外警告：一旦用戶通過改變瀏覽器設置進一步減小文字的話，可能會導致頁面文字小到難以辨認。 換句話說，如果在設計頁面時考慮的是默認瀏覽環境，並使用了一個在瀏覽器默認設置下文字非常小不過仍能看清的百分比值，那麼當用戶的瀏覽器所設置的文字大 小爲比默認值小的時候，這個百分比值下的文字就可能沒法看清楚了。記住，要在各種瀏覽器和文字大小的場景下做測試，不管設置什麼樣的關鍵字－ 百分比組合，都要確保文字總是可讀的。