爲什麼使用字體大小的百分比沒有做它應該做的？

Question

我有箱子裏面的導航項目的..這樣

<a href="#" class="box"> 
<h2>Portfolio</h2> 
</a> 

CSS：

a { 
display: block; 
} 
.box { 
background: #ff6b6b; 
width: 25%; 
height: 250px; 
} 

我要的是箱內文本佔據父箱的80％。

我想...

.box h2 { 
font-size: 80%; 
} 

但是，這並沒有達到我想要得到的結果。它使文本超小而不是取80％的父元素。 這是爲什麼？難道我做錯了什麼？

Answer 1

一個百分比可能意味着不同的事情取決於它在哪裏。例如，padding-top:100%實際上會使頂部填充等於元素的寬度 - 這不是您會想到的，但對高寬比非常有用。

在這種情況下，字體大小百分比是相對於父元素的字體大小。在這裏，你的元素的字體大小等於父字體大小的80％。

Answer 2

喜歡這個請使用em我認爲它正常工作。

看到demo

CSS

a { 
display: block; 
} 
.box { 
background: #ff6b6b; 
width: 25%; 
height: 250px; 
} 
.box h2 { 
font-size:2.5em; 
    margin:0; 
    padding:0; 
} 

---

，供您參考link或link1

Answer 3

你要做像，

.box h2 { 
    font-size: 0.8em; 
} 

Answer 4

字體大小％屬性：設置字體大小到父元素的字體大小

的比例從參考：http://www.w3schools.com/cssref/pr_font_font-size.asp