Question

我在一个视频工作室看到了这种编码。有助于查看HTML布局中的不同框。

header,
main,
nav,
article,
aside,
footer {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0.5em;
  margin-bottom: 0.5em;
}

* {
  box-sizing: border-box;
}

body {
  background-color: green;
  color: white;
}

HTML：

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Titel der Seite</title>

  <link rel="stylesheet" href="#">
  <link rel="stylesheet" href="#">
</head>

<body>

  <header>
    <a href="#">
        Logo – Beschreibung
    </a>

    <nav>
      Navigation
    </nav>
  </header>

  <main>
    <article>
      <h1>Hauptinhalt</h1>
      <p>Text</p>
    </article>

    <aside>
      Seitenleiste
    </aside>
  </main>

  <footer>
    <nav>
      Navigation
    </nav>

    <nav>
      Navigation
    </nav>
  </footer>

</body>

</html>

有效。请看这里！

目前让我发疯的是什么：在深绿色之间指定的位置是什么，盒子周围的边距和填充物有哪些？

在CSS中，只有两个背景色定义。

Answer 1

它是在CSS中定义的：

header,main,nav,article,aside,footer {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0.5em;
  margin-bottom: 0.5em;
}

例如，带有在标题中包含导航的结构：

<header>
<a href="#">
    Logo – Beschreibung
</a>

<nav>
  Navigation
</nav>
</header>

您的标头和您的导航都继承自同一个CSS类，其背景颜色具有不透明度设置：background-color：rgba（0，0，0， 0.2 ）;

HTML元素不会被嵌入，它们会彼此堆叠。

当物品堆叠并继承时，由于物品彼此堆叠在一起，因此使物品的阴影变得更暗。

不要将页面上的元素视为某种平面结构。一个抽象的例子就是：

假设您的书桌上有一张纸，上面有一些文字。您还有两块染成黄色的玻璃，一个比另一个小。在纸上放一块黄色玻璃，它从白色变成浅黄色。将稍小的玻璃杯放在玻璃杯的上方。现在，在有两块玻璃的地方，它甚至是更深的黄色。

从本质上讲，这就是您在使用CSS的过程。

主体元素是定义为绿色的纸张：背景色：绿色；

标题是您要放置的下一层，它是半透明的（因为您告诉它与rgba background-color中的最后一个参数具有不透明度：rgba（0，0，0，0.2）;）这样，无论标题覆盖在主体顶部的何处，您都会获得带色的颜色。

现在您将在标题中放置另一个元素。它具有自己的边距，因此不会完全覆盖整个标头。因此，您将导航项放置在标题中。每个CSS还具有不透明的背景色background-color：rgba（0，0，0，0.2），因此它将导致该区域更暗。

CSS：背景色的边距和填充物来自何处？

1 个答案: