为什么这会导致粗体字母？

Question

首先，我想要实现黑色背景： 而不是黑色背景我得到粗体字母。

HTML CODE

<span id="border"><h3>Title</h3>
        <p>Lorem Ipsum</p>
</span>

CSS代码

#border {
    background-color: #000000;
}

的jsfiddle

http://jsfiddle.net/tYaCK/

Answer 1

此粗体实际上来自您的h3标记作为默认样式而非边框css。

至于为什么你的边框没有出现......那是因为span是一个内联元素，不会扩展以包含块级h3标记。

您可以通过将display: inline-block;添加为h3标记的样式来查看此内容。

仅供参考你不应该在一个范围内拥有h3，因为它不是有效的html。我建议使用div代码替代span。

Answer 2

两个问题：

1. 粗体是<h3>标记的默认样式。

2. 您的黑色背景未显示，因为它位于<span>元素上。

   范围默认为display:inline，这意味着我们无法包含块元素。 h3是一个块元素。

   要解决此问题，请使用div代替span，或将范围设置为display:block。

Answer 3

如果情况略有不同，您可能已经看到了背景颜色。

考虑以下HTML：

<span id="border">
    Some opening text...
    <h3>Title</h3>
    <p>Lorem Ipsum</p>
    and some closing text.
</span>

我刚刚在span元素中添加了一些文字。

对于CSS，只需添加一种颜色即可看到文字：

#border {
    color: green;
    background-color: #000000;
}

演示于：http://jsfiddle.net/audetwebdesign/M8Exf/

这里发生的是CSS引擎打开内联块（span）并应用#border的格式。

但是，在找到块级h3后，CSS引擎会关闭span元素（内部）并开始一个新的块级别框，类似于p元素。

在找到span中的剩余文本后，CSS引擎会启动一个新的匿名内联框并应用#border中的相同样式。

此过程是CSS框和可视化格式模型的一部分。