背景只能通过背景属性覆盖整个屏幕？

Question

如果我在我的css文件中写这个。

html {
    background: black;
}

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

对于像div这样的另一个HTMLElement，它必须都具有使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>

我希望这会清除你的一些疑虑。