内外包装颜色

Question

这似乎是一个愚蠢的问题，但我真的很惊讶，在几个网站工作后。为什么foo div是红色的而不是绿色的？

https://jsfiddle.net/de8he92v/

<div class="wrapper-2">
    <div class="wrapper-1">
        <div>foo</div>
    </div>
</div>

<style>
.wrapper-1 { background-color: red; }
.wrapper-2 { background-color: green; }
</style>

编辑

好吧，我读了ThisClark的答案，但还是不明白。

这里是最新的小提琴：

https://jsfiddle.net/de8he92v/3/

现在foo是黄色的，但为什么它不是绿色的？

foo在红色包装中。然后，红色包装在绿色包装内。那为什么我们看不到绿色？什么疯狂？

换句话说，如果小狗在狗窝里，那么我们就会看到狗窝。但在这里我们只看到了小狗。

Answer 1

<div>foo</div>具有应用于它的默认用户代理样式，这通常是透明的背景和display: block。

因为它在.wrapper-1内部并且有一个透明的背景，所以你会看到红色。

要使这件事真正突出，把它添加到你的小提琴上，然后再运行一遍：

div {
  margin: 5px;
  padding: 5px;
  border: solid black 5px;
}

该附加样式将应用于页面上的所有div，并使您更直观地了解它们的位置和样式。

在应用了附加样式之后，它最终看起来如下所示：

​

​

此外，div.wrapper-1据说是div.wrapper-2的一个子元素，尽管1按数字顺序排在2之前，但div.wrapper-1样式出现在它们的父元素div.wrapper-2的顶部。同样的父子关系适用于div.wrapper-1和<div>foo</div>.

编辑

在3D视图中使用边距、填充和边框更新的代码：

​

​

您的更新没有其他样式：

​

​