你對DIV與SPAN區(qū)別及用法是否了解，這里和大家分享一下，在DIV+CSS開發(fā)的時(shí)候在html網(wǎng)頁制作，特別是標(biāo)簽運(yùn)用中DIV和span的區(qū)別及用法都是非常重要的內(nèi)容。

DIV與SPAN區(qū)別及用法

在DIV+CSS開發(fā)的時(shí)候在html網(wǎng)頁制作，特別是標(biāo)簽運(yùn)用中DIV和span的區(qū)別及用法。新手在使用web標(biāo)準(zhǔn)（DIVCSS）開發(fā)網(wǎng)頁的時(shí)候，遇到第一個(gè)問題是DIV與span有什么區(qū)別，什么時(shí)候用DIV，什么時(shí)候用span標(biāo)簽。

以下是在沒有對開發(fā)網(wǎng)頁頁面設(shè)置CSS樣式時(shí)候情況下，系統(tǒng)默認(rèn)情況下的介紹

DIV與span區(qū)別

DIV占用的位置是一行.

span占用的是內(nèi)容有多寬就占用多寬的空間距離，說明如下圖

分析：從上圖很容易知道“我是內(nèi)容一；用的DIV”和“我是內(nèi)容二；用的DIV”兩個(gè)內(nèi)容外部用的是<DIV>標(biāo)簽，他們得到樣式是占用了一排空間（相當(dāng)于換行一樣）；而“我是內(nèi)容三；用的span”和“我是內(nèi)容四；用的span”則，文字內(nèi)容有多寬，就占用多寬距離，使用<span>標(biāo)簽和不使用一樣效果。

小結(jié)：

在網(wǎng)頁開發(fā)的時(shí)候使用DIV和span都可以，通?？梢岳斫鉃闆]有什么區(qū)別。但注意的是DIV占用一行，span不會(huì)占用一行，內(nèi)容占多大寬度，span就有多寬。

擴(kuò)展與提升

DIV內(nèi)的span無需命名CSS選擇器偽類，例子如下

如果DIV的class為yangshi，則對內(nèi)的span設(shè)置CSS屬性則，代碼如下
.yanshispan{屬性及屬性值}

圖例實(shí)例演示

分析上圖：可以得出span無需再命名偽類名，直接使用CSS繼承屬性來對span設(shè)置CSS樣式。這里本來DIV內(nèi)的樣式為對文字設(shè)置藍(lán)色字，但是又通過繼承方式設(shè)置了span的樣式為文字為紅色。
 

【編輯推薦】

1. CSS中SPAN和DIV的區(qū)別
2. IE6、IE7、Firefox中margin問題解決辦法
3. DIV布局規(guī)范中CSS類及id命名方式
4. CSS兼容：解決IE6、IE7和IE8的兼容問題妙招
5. 將XHTML+CSS頁面轉(zhuǎn)換為打印機(jī)頁面技巧