html - 内外包装颜色

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 的回答，但还是不明白。

这是更新的 fiddle :

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

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

foo 在红色包装内。然后，红色 wrapper 在绿色 wrapper 里面。那么为什么我们看不到绿色呢？什么疯了？

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

Answer 1

<div>foo</div>应用了默认的用户代理样式，通常是透明背景和 display: block .

因为它在.wrapper-1里面并且有透明背景，你会看到红色。

为了让它真正脱颖而出，将它添加到你的 fiddle 中并再次运行它:

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

该附加样式将应用于所有 div s 在页面上，让您更好地了解它们的位置和样式。

应用附加样式后，它最终看起来像这样:

此外，div.wrapper-1据说是div.wrapper-2的 child 即使 1 按数字顺序排在 2 之前，div.wrapper-1样式出现在它们的父元素之上，div.wrapper-2 .相同的父子关系适用于 div.wrapper-1 之间和 <div>foo</div> .

编辑

您在 3D View 中使用边距、填充和边框更新的代码:

没有额外样式的更新: