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

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