个人中心
gpt4 book ai didi

css - 文章中 h1 和 h2 的字体大小相同

转载 作者：太空狗 更新时间：2023-10-29 13:30:57 27 4
gpt4 key购买 nike

问题:

为什么 <h1>和 <h2>标签具有相同的 font-size当被放入 <article> 中时？

输出:

enter image description here

然后我想也许只是我的眼睛欺骗了我，所以我测量了一下。

enter image description here

我原来是一样大的。

我查看了以下链接 ( http://w3c.github.io/html/rendering.html#sections-and-headings ) 我了解到它是基于层次结构的，但是 <h1>和 <h2>处于同一层级。

因此，<h1>应该是 2em 和 <h2>应该是 1.5em。

代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Headings</title>
        <meta charset="utf-8">
    </head>
    <body>
        <article>
            <h1>This is h1.</h1>
            <h2>This is h2.</h2>
            <h3>This is h3.</h3>
            <h4>This is h4.</h4>
            <h5>This is h5.</h5>
            <h6>This is h6.</h6>
        </article>
    </body>
</html>

最佳答案

这是设计使然 <h1>标签的行为就像这样，即专门为 <article> 缩小尺寸, <aside> , <nav> , <section>随着结构变得更深，它将继续减少，即 <article>里面<article>里面<article>然后每个级别的大小都会减少。

下面是演示:

<!DOCTYPE html>
<html>

<head>
  <title>Headings</title>
  <meta charset="utf-8">
</head>

<body>
  <span>Default</span>
  <h1>This is h1.</h1>
  <h2>This is h2.</h2>
  <h3>This is h3.</h3>
  <h4>This is h4.</h4>
  <h5>This is h5.</h5>
  <h6>This is h6.</h6>
  <hr>
  <article>
    <span>One level inside article tag</span>

    <h1>This is h1.</h1>
    <h2>This is h2.</h2>
    <h3>This is h3.</h3>
    <h4>This is h4.</h4>
    <h5>This is h5.</h5>
    <h6>This is h6.</h6>
    <hr>
    <article>
      <span>Two level inside article tag</span>

      <h1>This is h1.</h1>
      <h2>This is h2.</h2>
      <h3>This is h3.</h3>
      <h4>This is h4.</h4>
      <h5>This is h5.</h5>
      <h6>This is h6.</h6>
      <hr>
      <article>
        <span>Three level inside article tag</span>

        <h1>This is h1.</h1>
        <h2>This is h2.</h2>
        <h3>This is h3.</h3>
        <h4>This is h4.</h4>
        <h5>This is h5.</h5>
        <h6>This is h6.</h6>
        <hr>
      </article>
    </article>

  </article>
</body>

</html>

来源:

引用this 官方信息。

这个官方信息说:

In the following CSS block, x is shorthand for the following selector: :matches(article, aside, nav, section)

x h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; }
x x h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }

为什么 h1 和 h2 相同？

这是设计使然，因为浏览器制造商认为/同意，在网络编辑、制作人和开发人员之下 <h2>通常被视为视觉上更重要的标题，内容文档中的标题最好以 .这就是为什么 <h1> font-size不是默认更大的内部 <article> , <aside> , <nav> , <section>标签。

您的案例是第一级，即 x h1 h1 的大小在哪里是1.50em但此规则适用于 h1仅即 h2将具有默认/原始大小 1.50em .这里x是<article>标签。 

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
}

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

:-webkit-any()选择器匹配括号内列出的任何标签，即 article、aside、nav、section。在<article>里面, <aside> , <nav>或 <section>标签缩小到 1.50em 大小上面演示中展示的正常标题等。

关于css - 文章中 h1 和 h2 的字体大小相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39547412/

27 4 0
文章推荐： Xcode 和 Git 在 MacOSX Mountain Lion 上的安装
文章推荐： android - 如何使用 Android 自定义键盘一次输入 2 个字符
文章推荐： android - 添加SQLCipher后如何测试数据库是否加密？
文章推荐： git - 删除 Git 凭据-osxkeychain
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com