css 和 div - parent 对 child 的属性

Question

我有一个 content-div 样式背景颜色集:

#content { background-color: #FFF; }

conent div 有 3 个子 div，如下所示:

#content_right(middle,left) { float: left; width: 500px; }

html代码是:

<div id="content">
  <div id="content_left">...</div>
  <div id="content_middle">...</div>
  <div id="content_right">...</div>
</div>

我希望子 div 继承内容背景颜色，但它们没有。

似乎设置子 div 背景的唯一方法是为所有子项单独设置它们。

问题:如何仅在父级 content-div 中设置 bg-color，以便样式将传播到子级 div？

Answer 1

默认情况下，背景颜色通常被视为透明，而不是inherit。使用 inherit，背景图像将被复制到每个元素并由边距/填充等替换(对背景图像有更明显的效果)。

通常，这无关紧要，因为父级通常会变得足够大以包含所有子级(因此它们会通过父级的背景显示)。但是，由于您对所有 child 使用 float，因此 #content 的实际大小实际上并不是子 div 组合的大小。

float 内容可以存在于其父级边界之外。

没有自己的任何静态内容，#content 的高度为 0，而 content_left/right/middle 实际上存在于它下面(因为它们有 ... 内容，它们的高度默认为 line-height)。

为了更好地了解正在发生的事情，请尝试向 #content 添加高度并向子项添加背景颜色(或使用“Inspect Element”和标记突出显示Chrome 或 Firebug):

#content { background-color: #FFF; height: 5px; }
#content_right(middle/left) { float: left; width: 500px; background: #ccc; }

但是，是的，您需要在 float div 而不是它们的父级中指定背景颜色。