在body里，用font-size把字體設置為small時，發(fā)生了什么？

《Head First HTML與CSS 第2版》里字體與顏色一章里面講解字體大小，作者在css文件里，把body的字體統(tǒng)一設置為font-size:small,我把例子簡化成如下：

<body>
<h1>這是一個標題</h1>
<p>這里段落</p>
<h2>這里一個次標題</h2>
<p>這里也是段落</p>

然后是css部份

body {
    font-size:small;
    }

打開瀏覽器(chrome)看了一下，嗯，確實應用了這個css，所有的文字都比原始的大小小了。然后，繼續(xù)針對h1標題進行字體大小設置，增加下面css代碼：

body {
    font-size:small;
    }
h1 {
    font-size:150%;
    }

按照我的理解，h1既然已經設置成150%，那字體應該比設置成small時大，但等刷新頁面的時候，發(fā)現(xiàn)設置成150%后，h1的字體反而比剛設置成small時更小了。

我現(xiàn)在就很不理解為什么設置成150%的時候，反而更小，這中間發(fā)生了什么？網上也沒有查到答案。
附圖：
圖片描述

回答

編輯回答

尕筱澄

1、默認body,h1的font-size是 16px,32px；

2、當你設置

body {
    font-size:small;
    }

body 的 font-size 為 13px,h1 的 font-size 為 26px

3、當你繼續(xù)設置 h1 的時候，

body {
    font-size:small;
    }
h1 {
    font-size:150%;
    }

<percentage>：父元素字體大小的正數(shù)<percentage>

body 的 font-size 還是 13px，但是 h1 的 font-size = 父元素字體大小*150%，所以 h1 font-size 為 13*150%=19.5px，小于前面的 26px，所以變小了；

其實這里主要的問題是： font-size:small;，small的意思是，

xx-small, x-small, small, medium, large, x-large, xx-large
該套絕對大小關鍵字定義相對于用戶的默認字體大小(medium)。

默認body,h1的font-size是 16px,32px；small的結果導致前面變成 13px,26px;small并沒有把body 和 h1 的font-size關聯(lián)起來，僅僅是相對自身變??；

2017年6月7日 22:01

編輯回答

祈歡

2017年4月29日 01:28

編輯回答

久礙你

font-size:150%;是相對于父容器中字體尺寸進行相應調整

也就是150%是的對比標準是p元素，而不是h元素

2018年1月6日 14:53

編輯回答

眼雜

font-size:150%;是相對于父容器中字體尺寸進行相應調整，
建議請看http://www.dreamdu.com/css/pr...

2017年2月4日 18:26

編輯回答

巫婆

一是由于繼承，二是默認樣式
例如：
設置前：body中font-size: 18px; h1默認為font-size: 2em; ==> 36px
在body上設置的font-size:12px; h1上設置font-size:150%; ==> 18px

對比起來自然會小些

2018年5月15日 08:17

編輯回答

祉小皓

你打開devtools看看就知道了。

首先是不設置樣式下的h1，瀏覽器會對其設置默認樣式：
也就是font-size是2em。em這個單位意思是相對于父元素的字體大小來計算數(shù)值。所以h1的字號相當于2倍body的字號，也就是16px*2=32px。
給body設置字號small后，這里不放截圖了，顯然small比16px小，所以h1的字號雖然是2em，但實際大小是13px*2 = 26px。至于這里的small字號等于13px是瀏覽器自己的行為，不討論了。
最后設置h1的字號為150%，實際上相當于設置成1.5em，與原來的2em比起來當然又要小一號了。

總結一下就是，你以為h1的字號應該與body字號大小相同，所以覺得設置成150%后會比原來大。實際上不是的，瀏覽器將h1的字號默認設置成body的兩倍字號大小了。

2017年1月28日 08:09