SPAN元素和DIV元素的區別

作者：hibernater 2010-09-07 13:58:28

這里向大家重點描述一下SPAN元素和DIV元素的區別，DIV是塊元素，SPAN是內嵌元素。塊元素相稱于內嵌元素在前后各加一個<br>換行。

SPAN元素和DIV元素有什么區別？最顯明的區別是：DIV是塊元素，SPAN是內嵌元素。塊元素相稱于內嵌元素在前后各加一個<br>換行。實在，塊元素和行內元素也不是原封不動的，只需給塊元素定義display:inline，塊元素就成了內嵌元素，同樣的，給內嵌元素定義了display:block就成了塊元素了。

<div>和<span>的區別

span元素:

容許網頁制造者給出一個樣式表,但無須加正在HTML元素之上,也便是道span是獨立于HTML元葷的.span在樣式表做是做為一個本識符使用,而且也接收styleclass和ID屬性如<spanclass="xx">.....</span>
span是一個內聯元素,它純潔是為了利用樣式外表成立的。

DIV元素:

基礎上取span類似,或許道具有SPAN一切的功用,此外還具有SPAN不及的特點.DIV是一個塊,也就是所謂的"容器",它具有本人獨立的段降,獨立的題目,獨立的表格,就如<html>.....</html>一樣包含了一切。

代碼示例：

<style> 
div,span{border:1pxsolid#000;margin:2}  
</style> 
<div>div1</div><div>div2</div> 
<span>span1</span><span>span2</span> 
<br> 
<divstyledivstyle="display:inline">div3</div> 
<divstyledivstyle="display:inline">div4</div> 
<spanstylespanstyle="display:block">span3</span> 
<spanstylespanstyle="display:block">span4</span>

技能：

有些朋友會說DIV是層標簽，實在HTML里是沒有層這個說法的，只不外是為了易于懂得，Dreamweaver里才這樣寫的，每個對于象都可以成為“層”，只須要給對象定義position屬性(值為absolute或者relavite)。例如，要讓圖片成為“層”，可以這樣寫代碼：

 
 
<imgsrcimgsrcimgsrcimgsrcimgsrcimgsrcimgsrcimgsrc="demo.gif" 
style="posibion:absolute;left:20;top:20">

特殊提醒

原例代碼運轉后果如圖2.1.6.3所示，為了更能闡明答題，那里給塊元素和內嵌元素皆加了1像素闊的玄色真線邊框，自圖中能夠望到，DIV默覺得塊元素，定義display屬性值為inline后以內嵌元素顯示，而SPAN默以為內嵌元素，定義display屬性值為block后則以塊元素顯示。

【編輯推薦】

Firefox瀏覽器里DIV重疊問題解決
jQuery代碼輕松實現DIV彈出效果
CSS中DIV彈出層問題解決方案
七大CSS選擇符用法詳解
探究CSS高級語法中選擇器分組和CSS繼承用法

責任編輯：佚名來源： javaeye.com

SPAN DIV