内外包装颜色

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 1}}。相同的父子关系适用于div.wrapper-1和<div>foo</div>。

修改

您在3D视图中更新的代码，包含边距，填充和边框：

您的更新没有其他风格：