Question

这可能是一个非常简单且经常被问到的问题，但我找不到合适的搜索关键字：我有以下代码：

        <div id="bloquetexto4" class="bloquetexto">
        <H2><b>TITULO</b></H2>
        <p>Texto bla bla bla.</p>

这个CSS：

.bloquetexto p { 
    font-size: 110%;
    color: orange;
}
.bloquetexto h2 { font-size: 90%; }

我只希望H2元素比正常环境中的元素略小，但是当我添加它时，H2实际上变成了一个小得多的文本，当然远小于其通常大小的90％（我在http://jsfiddle.net/c6hzghcq/）做了一个JsFiddle。

我理解这是因为，当你添加font-size时，H2的大小是根据父元素中的字体大小计算的，所以在上面的例子中，H2 size将是父元素常规文本大小的90％。我的问题是：我怎样才能使它根据自身计算尺寸？（正如我所说的：我只是希望H2比平时要小一些，无论页面中其他元素的大小如何）。

Answer 1

使用px，em或其他任何内容，而不是%。因为你知道%，所以得到父亲的身高。

Answer 2

如果设置H2元素，大多数浏览器都有标准设置，可以在this link中找到，H2是1.5em;

	 .bloquetexto p {
	   font-size: 110%;
	   color: orange;
	 }
	 .bloquetexto h2 {
	   font-size: 1.3em;
	   /*Smaller text because standard is 1.5em;*/
	 }

<div id="bloquetexto4" class="bloquetexto">
  <H2><b>TITULO</b></H2>
  <p>Texto bla bla bla.</p>

EDIT :: 您还应该使用“重置”样式表，因为并非所有浏览器都相同，所以可以使用“重置”样式表。

根据自身调整H1，H2 ...标签，而不是父元素

2 个答案: