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

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

一、DIV與SPAN的區(qū)別與特點 ? - ? TOP

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

div與span區(qū)別

div占用的位置是一行，

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

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

分析：從上圖很容易知道“我是內(nèi)容一；用的div”和“我是內(nèi)容二；用的div”兩個內(nèi)容外部用的是

標(biāo)簽，他們得到樣式是占用了一排空間(相當(dāng)于換行一樣)；而“我是內(nèi)容三；用的span”和“我是內(nèi)容四；用的span”則，文字內(nèi)容有多寬，就占用多寬距離，使用標(biāo)簽和不使用一樣效果。

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

在網(wǎng)頁開發(fā)的時候使用div和span都可以，通常可以理解為沒有什么區(qū)別。但注意的是div占用一行，span不會占用一行，內(nèi)容占多大寬度，span就有多寬。

三、擴(kuò)展與提升 ? - ? TOP

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

如果div的class為yangshi，則對內(nèi)的span設(shè)置css屬性則，代碼如下

.yanshi span{屬性及屬性值}

四、圖例實例演示效果 ? - ? TOP

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

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

希望divcss5網(wǎng)站總結(jié)的css案例對你有幫助，這里是關(guān)于div與span區(qū)別及用法介紹講解技術(shù)文章。

總結(jié)

以上是生活随笔為你收集整理的简述div标签和span标签的不同_div与span区别及用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。