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

一、DIV與SPAN的區(qū)別與特點(diǎn)

以下是在沒有對(duì)開發(fā)網(wǎng)頁(yè)頁(yè)面設(shè)置css樣式時(shí)候情況下，系統(tǒng)默認(rèn)情況下的介紹
div與span區(qū)別
div占用的位置是一行，
span占用的是內(nèi)容有多寬就占用多寬的空間距離，說明如下圖

sapn標(biāo)簽使用案例截圖

分析：從上圖很容易知道“我是內(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)簽和不使用一樣效果。

二、span標(biāo)簽小結(jié)

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

三、擴(kuò)展與提升

div內(nèi)的span無需命名css選擇器偽類，例子如下
如果div的class為yangshi，則對(duì)內(nèi)的span設(shè)置css屬性則，代碼如下
.yanshi span{屬性及屬性值}

四、圖例實(shí)例演示效果

對(duì)span設(shè)置css樣式截圖

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

到此這篇關(guān)于解析div與span區(qū)別與用法的文章就介紹到這了,更多相關(guān)div與span區(qū)別與用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論