html - 为什么使用百分比作为字体大小没有做它应该做的事情？

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%。这是为什么呢？难道我做错了什么？

score 1 · Accepted Answer

百分比可能意味着不同的东西，具体取决于它的位置。例如，padding-top:100%实际上使顶部填充等于元素的宽度- 这不是您猜到的，但对于纵横比非常有用。

在这种情况下，字体大小百分比是相对于父元素的字体大小的。在这里，您的元素的字体大小将等于父级字体大小的 80%。

score 1 · Accepted Answer

像这样请使用em我认为它正常工作。

css

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

供您参考链接或链接1

score 0 · Accepted Answer

0

你必须这样做，

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

于 2013-10-11T12:45:15.483 回答

score 0 · Accepted Answer

Font-size % 属性：将字体大小设置为父元素字体大小的百分比

4 回答 4