2.4 div和span的区别
div和span都是容器类型，但它们有不同的性质。默认情况下，div的宽度是无限的(至少对于浏览器边界来说)，通过对其应用边框可使其可见，如下所示：
<div style="border:1px solid green;">Hello</div>
而span的宽度取决于其包含的文本。因此，下列HTML代码行显示的只是围绕单词Hello的边框，它没有扩展至浏览器的右边界。
<span style="border:1px solid green;">Hello</span>
span随文本或其他对象进行回绕，因此其边框是不规则的。例如，在下面的Web页面中，在创建一些示例span和div之前，通过CSS使所有div的背景为黄色，所有span的背景为青色，并且为它们添加边框。
<html
<head>
<title>Div and span example</title>
<style>
div, span { border:1px solid black; }
div { background-color:yellow; }
span { background-color:cyan; }
</style>
</head>
<body>
<div>This text is within a div tag</div> This isn't.
<div>And this is again.</div><br />
<span>This text is inside a span tag.</span> This isn't.
<span>And this is again.</span><br /><br />
<div>This is a larger amount of text in a div that
wraps around to the next line of the browser</div><br />
<span>This is a larger amount of text in a span that
wraps around to the next line of the browser</span>
</body>
</html>
图2-2显示了这个页面在Web浏览器中的样子。尽管该图是个灰度图，但它清楚地显示了div如何扩展至浏览器的右边界，并且强制后面的内容在其下第一个可用位置的开始处显示。
该图还显示了span如何保持自我，只占用容纳内容所需的空间，没有强制后面的内容在其下方显示。例如，在该图的下面两个示例中，可看到当div在屏幕边界回绕时，它们保持矩形，而span只是跟随着其中的内容流。
图2-2 一些不同宽度的div和span
因此，由于div只能是矩形，故它们更适合于包含像图像、boxout(嵌套的盒子)、引用等这样的对象，而span最适合于容纳文本或其他具有行内一个跟着另一个特点的对象(如文本的部分)。
鄂公网安备 42010302001612号