我在视频研讨会上看到过这种编码。它将有助于在 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 中，您只有两个背景颜色定义。
最佳答案
它在此处的 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 元素不会嵌入，它们会堆叠在一起。
当元素堆叠和继承时，它会为元素提供更深的阴影，因为它们相互堆叠时不透明。
不要将页面上的元素视为某种平面结构。一个抽象的例子是:
假设您的 table 上有一张纸，上面有一些文字。你还有两 block 染成黄色的玻璃，一 block 比另一 block 稍小。将一 block 黄色玻璃放在纸上，它会从白色变成淡黄色。将稍小的玻璃片放在该玻璃杯的顶部。现在，只要有两 block 玻璃，它就会变成更深的黄色。
这基本上就是您在这里使用 css 所做的。
body元素是定义为green: background-color: green的纸张；
标题是您要放置的下一层，它是半透明的(因为您告诉它不透明，rgba 背景颜色中的最后一个参数:rgba(0, 0, 0, 0.2);)所以无论标题覆盖在正文顶部的什么地方，您都会得到有色颜色。
现在您将另一个元素放置在页眉中。它有自己的边距，因此不会完全覆盖整个页眉。因此，您将导航项放在页眉内。根据 css，它还有一个不透明的背景颜色 background-color: rgba(0, 0, 0, 0.2) 所以它会导致该区域更暗。
关于html - CSS:它的背景颜色的边距和填充从哪里来？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57994849/