DIV與SPAN的區(qū)別
div和span是什么意思?
相對與其他XHTML標(biāo)簽，div和span對于它們包含的元素是沒有意義的。例如當(dāng)你看到<h1></h1>標(biāo)簽，你知道里面是標(biāo)題，當(dāng)你看到<p></p>標(biāo)簽的時候你知道里面是一個新的自然段。可是div和span標(biāo)簽并沒有這樣意義。div只是一個分塊的標(biāo)簽，他可以將網(wǎng)頁分成幾個區(qū)塊。div里面可能包含一個標(biāo)題，一個段落，也可能包含圖片在內(nèi)的很多元素，甚至div也可以再包含div。而span是行級元素(行內(nèi)標(biāo)簽)，通常情況下它都用來定義一小段文字的樣式。它們的另一個區(qū)別就是div會造成換行，而span則不會。
當(dāng)然了，div和span的具體意義和區(qū)別脫離開實踐是很難說清楚的。下面我們就來看看div和span的應(yīng)用實例。
塊級標(biāo)簽<div>
實例頁面。源代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真慘!被用來演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
.box {
background-color: #EEFAFF;
width: 30%;
float: left;
}
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
text-align: center;
width: 100%;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="boxhead">我在div內(nèi)，類為boxhead</div>
<p>我在div內(nèi)，屬性為box。</p>
<p>我在div內(nèi)，屬性為box。</p>
<p>我在div內(nèi)，屬性為box。</p>
<p>我在div內(nèi)，屬性為box。</p>
</div>
</body>
</html>
在上面的例子中，我們首先在頁面內(nèi)放了一個class為box的div，而在它的內(nèi)部又放了一個class為boxhead的div。為了便與觀察，我們?yōu)閐iv添加了背景顏色。下面我們來看看對這兩個div定義的前面教程中沒有的屬性：
對box的屬性：width: 30%;表示這個box div占頁面寬度的30%，而浮動屬性float: left; 則表示box div浮動在頁面的左側(cè)。
對boxhead的屬性：width: 100%;由于boxhead div在box div之內(nèi)，那么這里的100%是指box的寬度。
行級標(biāo)簽<span>(行內(nèi)標(biāo)簽)
實例頁面。本實例在上面實例的基礎(chǔ)之上，只修改一段文本的顏色。修改如下代碼：
將第一個“<p>我在div內(nèi)，屬性為box。</p>”修改為
<p><span style="color:red">我在div內(nèi)，也在span內(nèi)，</span>屬性為box。</p>
以上只是關(guān)于div和span的簡單介紹，而實際應(yīng)用中div和span的用法是非常靈活的。
本文來自CSDN博客，轉(zhuǎn)載請標(biāo)明出處：http://blog.csdn.net/cesium/archive/2007/03/28/1543999.aspx
最明顯的區(qū)別是：DIV是塊元素，SPAN是內(nèi)嵌元素。塊元素相當(dāng)于內(nèi)嵌元素在前后各加一個<br>換行。其實，塊元素和行內(nèi)元素也不是一成不變的，只要給塊元素定義 display:inline，塊元素就成了內(nèi)嵌元素，同樣地，給內(nèi)嵌元素定義了display:block就成了塊元素了。
具體步驟 ：
代碼示例：
<style>
div,span{border:1px solid #000;margin:2}
</style>
<div>div1</div><div>div2</div>
<span>span1</span><span>span2</span>
<br>
<div style="display:inline">div3</div>
<div style="display:inline">div4</div>
<span style="display:block">span3</span>
<span style="display:block">span4</span>
技巧：有些朋友會說DIV是層標(biāo)簽，其實HTML里是沒有層這個說法的，只不過是為了易于理解，Dreamweaver里才這樣寫的，每個對象都可以成為“ 層”，只需要給對象定義position屬性(值為absolute或relavite)。例如，要讓圖片成為“層”，可以這樣寫代碼：
<img src="demo.gif" style="posibion:absolute;left:20;top:20">
簡單理解，DIV是放在外部使用的，而span很少單獨使用，一般都是放在div或者table里面使用。所以叫行內(nèi)元素?。。?！
最簡單的理解.
span 不換行
div 換行
為什么呢
因為div是塊元素
而span是跟<a></a>一樣不影響塊的.
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答?。?點擊進入論壇
您可能感興趣的文章:
- 上一篇：自增字段的SQL語句解決方案
- 下一篇：html中標(biāo)簽，你知道多少？
