1

我试图弄清楚css，一次一步。考虑以下代码：

<header id="main">
    <a href="#" id="title"></a> 
</header>

和 CSS：

#main{
    height: 220px;
    width: auto;
    border: 2px #000000 solid;
}

#title{
    float: left;
    background: url(http://i.imgur.com/m9fvwoJ.jpg) no-repeat;
    width: 300px;
    height: 175px;
}

如果我删除浮动属性，图片“消失”，我很难理解为什么。

这是 JsFiddle => http://jsfiddle.net/5nWag/3/中的代码

4

1 回答 1

3

一个元素在浮动时会自动成为块级元素，因此您的宽度和高度规则将按照您的预期应用和工作。内联元素不能有明确的宽度和高度，因为它们的内容决定了它们的行框的大小。内联元素也不能有任何垂直边距、边框或填充。背景消失的原因是因为您<a>没有内容，因此没有尺寸，还因为您显然无法在<a>不修改其显示值的情况下为元素提供背景图像。如果将 a 包裹<span>起来并添加内容，则背景图像将可见：

http://jsfiddle.net/5nWag/8/

于 2013-06-11T15:36:30.727 回答