div与span区别及用法
以下是在沒有對(duì)開發(fā)網(wǎng)頁(yè)頁(yè)面設(shè)置css樣式時(shí)候情況下,系統(tǒng)默認(rèn)情況下的介紹
div與span區(qū)別
div占用的位置是一行,
span占用的是內(nèi)容有多寬就占用多寬的空間距離,說(shuō)明如下圖
分析:從上圖很容易知道“我是內(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)簽和不使用一樣效果。 copyright www.divcss5.com divcss5
小結(jié):在網(wǎng)頁(yè)開發(fā)的時(shí)候使用div和span都可以,通常可以理解為沒有什么區(qū)別。但注意的是div占用一行,span不會(huì)占用一行,內(nèi)容占多大寬度,span就有多寬。
擴(kuò)展與提升
div內(nèi)的span無(wú)需命名css選擇器偽類,例子如下
如果div的class為yangshi,則對(duì)內(nèi)的span設(shè)置css屬性則,代碼如下
.yanshi span{屬性及屬性值}
圖例實(shí)例演示
?
?
分析上圖:可以得出span無(wú)需再命名偽類名,直接使用css繼承屬性來(lái)對(duì)span設(shè)置css樣式。這里本來(lái)div內(nèi)的樣式為對(duì)文字設(shè)置藍(lán)色字,但是又通過(guò)繼承方式設(shè)置了span的樣式為文字為紅色
總結(jié)
以上是生活随笔為你收集整理的div与span区别及用法的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: css( div和span)——读书笔记
- 下一篇: tabs选项卡切换效果(jquery版)