2.4 div和span的區(qū)別
div和span都是容器類型，但它們有不同的性質(zhì)。默認(rèn)情況下，div的寬度是無限的(至少對于瀏覽器邊界來說)，通過對其應(yīng)用邊框可使其可見，如下所示：
<div style="border:1px solid green;">Hello</div>
而span的寬度取決于其包含的文本。因此，下列HTML代碼行顯示的只是圍繞單詞Hello的邊框，它沒有擴(kuò)展至瀏覽器的右邊界。
<span style="border:1px solid green;">Hello</span>
span隨文本或其他對象進(jìn)行回繞，因此其邊框是不規(guī)則的。例如，在下面的Web頁面中，在創(chuàng)建一些示例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顯示了這個(gè)頁面在Web瀏覽器中的樣子。盡管該圖是個(gè)灰度圖，但它清楚地顯示了div如何擴(kuò)展至瀏覽器的右邊界，并且強(qiáng)制后面的內(nèi)容在其下第一個(gè)可用位置的開始處顯示。
該圖還顯示了span如何保持自我，只占用容納內(nèi)容所需的空間，沒有強(qiáng)制后面的內(nèi)容在其下方顯示。例如，在該圖的下面兩個(gè)示例中，可看到當(dāng)div在屏幕邊界回繞時(shí)，它們保持矩形，而span只是跟隨著其中的內(nèi)容流。
圖2-2 一些不同寬度的div和span
因此，由于div只能是矩形，故它們更適合于包含像圖像、boxout(嵌套的盒子)、引用等這樣的對象，而span最適合于容納文本或其他具有行內(nèi)一個(gè)跟著另一個(gè)特點(diǎn)的對象(如文本的部分)。
鄂公網(wǎng)安備 42010302001612號