css - 背景仅通过背景属性覆盖整个屏幕？

Question

如果我把它写在我的 css 文件中。

html {
    background: black;
}

黑色将覆盖我的整个屏幕。但是那时，我的 html 元素没有真正的高度。height 属性为 0。

对于另一个 HTMLElement，例如 div，它必须同时具有真正的 height 和 width 属性，这些属性构成了 background-color 有效。

为什么 body, html 和 div 有区别？

我觉得，

html {
    height: 100%;
    width: 100%;
    background: black;
}

是唯一让整个屏幕背景变色的方法。

Answer 1

首先，html、body 或 div 元素在表示方面没有区别。 与 html 和 body 一样，div 高度和宽度默认情况下未设置为任何值。如果你不自己设置，如果里面没有内容，你是看不到它的背景色的。

例子:

.empty{
   background-color: black; 
}

.size-set{
  height: 100px;
  width: 100px;
  background-color: green;  
}


.content-div{
   background-color: yellow; 
}

<div class="empty"></div>

<div class="size-set"></div>

<div class="content-div">content is here</div>

我希望这能消除您的一些疑虑。