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

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

<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這里段落</p>
<h2>這里一個(gè)次標(biāo)題</h2>
<p>這里也是段落</p>

然后是css部份

body {
    font-size:small;
    }

打開瀏覽器(chrome)看了一下，嗯，確實(shí)應(yīng)用了這個(gè)css，所有的文字都比原始的大小小了。然后，繼續(xù)針對(duì)h1標(biāo)題進(jìn)行字體大小設(shè)置，增加下面css代碼：

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

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

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

回答

編輯回答

尕筱澄

1、默認(rèn)body,h1的font-size是 16px,32px；

2、當(dāng)你設(shè)置

body {
    font-size:small;
    }

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

3、當(dāng)你繼續(xù)設(shè)置 h1 的時(shí)候，

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，所以變小了；

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

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

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

2017年6月7日 22:01

編輯回答

祈歡

2017年4月29日 01:28

編輯回答

久礙你

font-size:150%;是相對(duì)于父容器中字體尺寸進(jìn)行相應(yīng)調(diào)整

也就是150%是的對(duì)比標(biāo)準(zhǔn)是p元素，而不是h元素

2018年1月6日 14:53

編輯回答

眼雜

font-size:150%;是相對(duì)于父容器中字體尺寸進(jìn)行相應(yīng)調(diào)整，
建議請(qǐng)看http://www.dreamdu.com/css/pr...

2017年2月4日 18:26

編輯回答

巫婆

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

對(duì)比起來自然會(huì)小些

2018年5月15日 08:17

編輯回答

祉小皓

你打開devtools看看就知道了。

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

總結(jié)一下就是，你以為h1的字號(hào)應(yīng)該與body字號(hào)大小相同，所以覺得設(shè)置成150%后會(huì)比原來大。實(shí)際上不是的，瀏覽器將h1的字號(hào)默認(rèn)設(shè)置成body的兩倍字號(hào)大小了。

2017年1月28日 08:09