Question

有人可以向我解释为什么p-tag没有继承font-size，嵌套在div和p标签中？还有锚标签？他们不应该继承身体的覆盖字体大小：160％，变得越来越大？

如你所知，css的第一部分是Eric Meyer重置风格的一部分。如果我的理解是正确的，那么font-size属性不应该只放在字体下面才能使它生效吗？是不是因为级联效应而被简单地覆盖了？

实际上，如果您尝试更改该字体大小：100％;对于别的东西（例如：200％），你会注意到它没有视觉效果（至少没有直接效果）。

是字体：inherit;做我不知道的事情的风格？这让我很生气......没想出这个。

先谢谢大家。

<head>
  <style>
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 100%; 
      font: inherit;
      vertical-align: baseline; 
    }

    body{
      font-size: 160%;
    }
  </style>
</head>

<body>
  <p>Paragraph <a href="#">OUTSIDE</a> of div</p>

  <div>
    <p>Paragraph INSIDE of div</p>
  </div>
</body>

Answer 1

此处忽略设置font-size: 100%，因为设置font: inherit（稍后出现）会覆盖它。设置font始终设置所有与字体相关的属性，其中包括font-size: inherit。继承的值通常取决于属性，但在大多数情况下，在这种情况下，父元素的计算值。因此，无论font-size body的设置值是什么值，都会使用取决于浏览器的像素或点值。这是继承的计算值，而不是百分比。

不支持值inherit的浏览器将忽略此设置并使用font-size: 100%，这当然会产生相同的大小。

Answer 2

您已将body上的字体大小设置为160％。这意味着页面中的所有元素现在的字体大小将比浏览器使用的基本字体ize多60％。

当重置样式中的font-size设置为100％时，它基本上意味着所有元素的font-size将与浏览器的基本字体大小相同。因此，即使像<h1>, <h2> ...这样的标题标记也会采用相同的字体大小。为了使每个嵌套元素的字体大小变大，您必须在div上定义字体大小，如果需要，还要定义p。所以也许你可以这样做：

div{
    font-size:200%;
}

p{
    font-size:200%;
}

如果将font-size定义为100％，它将继承其父元素的字体大小。

为什么字体变得越来越大？字体继承是否会起作用？

2 个答案: