时间戳

首页 > 解决方案 > CSS：它的背景色来自哪里的边距和填充？

html - CSS：它的背景色来自哪里的边距和填充？

问题描述

我在视频研讨会中看到了这种编码。它有助于查看 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 中，您只有两个背景颜色定义。

标签： htmlcss

解决方案

它在此处的 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 所做的事情。

body 元素是纸张，定义为 green: background-color: green;

标题是您要放置的下一层，它是半透明的（因为您告诉它与 rgba 背景颜色中的最后一个参数不透明度：rgba(0, 0, 0, 0.2);) 所以你得到标题覆盖在正文顶部的任何地方的有色颜色。

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

推荐阅读