CSS 背景颜色无法正常工作

Question

我有这个 HTML 代码

header1 {
  background-color: red;
}

<header1>
  <h1> My most favorite album is Dirty Sprite 2 by Future</h1>
  <img src="images/cover.jpg" alt="DS2 Cover" width="300" height="300">
  <audio controls>
            <source src = "audio/14%20-%20Trap%20Niggas.mp3" type = "audio/mpeg">
        </audio>
</header1>

但是，它并没有将整个 header1 设置为红色？只有一个红条
截屏：

Answer 1

这里有几个问题。

最明显的是 header1 不是一个可识别的 HTML 标签。 （您的代码可能会在大多数验证器中失败）。

浏览器往往非常宽容，因此他们会尽最大努力呈现您的页面。然而，他们不知道 header1 是什么，所以他们没有内置的样式。

对于（合法的）标题标签，它们将具有内置样式，您可以通过查看元素的浏览器开发工具样式来了解它是什么。例如，Chrome 刚刚向我展示了它假定 display: block 作为默认设置。

如果你给你的 header1 一个显示样式：block 它将把背景显示为你想要的红色。但最好使用“合法” HTML 并使用标题标签而不是 header1，如果这是唯一背景为红色的标题，则可能使用一个类来进行样式设置。

Answer 2

header1 不是 html tag 的有效名称尝试使用 div 并为其设置 id 或 class所以在css中引用它会更容易

#header1 {
  background-color: red;
}

<div id="header1"> your other code goes here </div>

Answer 3

您可以在这种情况下使用 float: left;。

header1 {
    background-color: red;
    float: left;
}

<header1>
    <h1> My most favorite album is Dirty Sprite 2 by Future</h1>
    <img src = "images/cover.jpg" alt = "DS2 Cover" width="300" height="300">
    <audio controls>
        <source src = "audio/14%20-%20Trap%20Niggas.mp3" type = "audio/mpeg">
    </audio>
</header1>