7.3日音訊,div與span關(guān)聯(lián)和應(yīng)用
日期：2013-07-03發(fā)布：首創(chuàng)網(wǎng)絡(luò)瀏覽：908次
7.3日音訊,div與span關(guān)聯(lián)和應(yīng)用。在網(wǎng)頁制作中我們經(jīng)常會用到span與div，雖然用的很多，但是它們之間也有很多小的知識需要我們來了解，在這里和大家分享一下，在做網(wǎng)站制作div+css開發(fā)的時候，特別是標(biāo)簽運用中DIV和span的區(qū)別及用···
本文關(guān)鍵字：7.3日,音訊,div,與,span,關(guān)聯(lián),和,應(yīng)用,7.3日,音訊,
7.3日音訊,p與span關(guān)聯(lián)和應(yīng)用。在網(wǎng)頁制作中我們經(jīng)常會用到span與p，雖然用的很多，但是它們之間也有很多小的知識需要我們來了解，在這里和大家分享一下，在做網(wǎng)站制作div+css開發(fā)的時候，特別是標(biāo)簽運用中DIV和span的區(qū)別及用法都是非常重要的內(nèi)容。
一般來說，它們都是容器，這一點是共同的，但是新手在使用web標(biāo)準(zhǔn)（DIVCSS）開發(fā)網(wǎng)頁的時候，遇到第一個問題是DIV與span有什么區(qū)別，什么時候用DIV，什么時候用span標(biāo)簽。
以下是在沒有對開發(fā)網(wǎng)頁頁面設(shè)置CSS樣式時候情況下，系統(tǒng)默認(rèn)情況下的介紹
DIV與span區(qū)別
DIV占用的位置是一行.
span占用的是內(nèi)容有多寬就占用多寬的空間距離，說明如下圖
分析：從上很容易知道“我是內(nèi)容一；用的DIV”和“我是內(nèi)容二；用的DIV”兩個內(nèi)容外部用的是
在網(wǎng)頁開發(fā)的時候使用DIV和span都可以，通?？梢岳斫鉃闆]有什么區(qū)別。但注意的是DIV占用一行，span不會占用一行，內(nèi)容占多大寬度，span就有多寬。
DIV內(nèi)的span無需命名CSS選擇器偽類，例子如下
如果DIV的class為yangshi，則對內(nèi)的span設(shè)置CSS屬性則，代碼如下
.yanshispan{屬性及屬性值}
可以得出span無需再命名偽類名，直接使用CSS繼承屬性來對span設(shè)置CSS樣式。這里本來DIV內(nèi)的樣式為對文字設(shè)置藍色字，但是又通過繼承方式設(shè)置了span的樣式為文字為紅色。
兩者最明顯的區(qū)別在于DIV是塊元素，而SPAN是行內(nèi)元素(也譯作內(nèi)嵌元素)。
詳解：1.所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行，測試一下下面的代碼你會有更形象的理解：
測試緊跟前面的"測試"顯示
這里會另起一行顯示
2.塊元素和行內(nèi)元素也不是一成不變的，通過定義CSS的display屬性值可以互相轉(zhuǎn)化，如：
測試
還有一個標(biāo)識符具有類似的功能，＜p＞DIV也被用來在HTML文件中建立邏輯部分。但與＜p＞SPAN不同，＜p＞工作于文本塊一級，它在它所包含的HTML元素的前面及后面都引入了行分隔。
技巧：有些朋友會說DIV是層標(biāo)簽，其實HTML里是沒有層這個說法的，只不過是為了易于理解，Dreamweaver里才這樣寫的，每個對象都可以成為“層”，只需要給對象定義position屬性(值為absolute或relavite)。例如，要讓圖片成為“層”，可以這樣寫代碼：
html4規(guī)范的一大突破就是引入了一大空元素和 。所謂空元素，就是說如果單獨在頁面上插入這兩個元素，不會對頁面產(chǎn)生影響，但是這兩個屬性專門為樣式表定義而生，如果對和 定義樣式表以后，其中內(nèi)容的樣式舊會隨之變化。
和 元素都能處理任意大小的片斷，他們之間的異同可以用一個例子來說明。
示例如下
01
02
03
04
05
06.myspan1{color:#FFFFFF;background-color:#800000;}
07.myspan2{color:#000000;background-color:#CCFFCC;}
08.myspan3{color:#FFFFFF;background-color:#000080;}
09.myspan4{color:#000000;background-color:#FFCCCC;}
10.myp1{color:#FFFFFF;background-color:#008000;}
11.myp2{color:#000000;background-color:#CCCCFF;}
12.myp3{color:#FFFFFF;background-color:#000000;}
13.myp4{color:#000000;background-color:#FFFFAA;}
14
15
16
17
生命必須元素
18
19
20
21
22
23
24
25
26
27
28
文件說明
設(shè)計者在代碼中輸入了4個單詞，單詞之間沒有換行，也沒有空格。然后為每一個單詞嵌套上和
元素，兩種元素產(chǎn)生了不同的顯示效果。元素包含的內(nèi)容，在顯示格式上沒有任何變化，沒有因為插入元素而產(chǎn)生換行或者其他排版效果。這樣的顯示效果稱為“行內(nèi)元素”，設(shè)計者可以在一段文本中插入任意多對元素，然后添加字體、顏色、背景、邊框和邊距等各種格式。
元素所包含的內(nèi)容，在格式上有所變化，每一個
元素所包含的內(nèi)容都另起一行，瀏覽器為他們分配了一個獨立區(qū)域，形成一個一個“塊”，因此
也被稱作“塊級元素”。不過除了這個區(qū)別，在其他方面和 基本相同，它們都可以為其中內(nèi)容添加各種樣式。
正是有了和 兩個元素的出現(xiàn)，使得HTML4的樣式定義變得更為靈活和規(guī)范。
1、行內(nèi)樣式定義元素
屬于行內(nèi)樣式定義元素，它的插入不會使原有結(jié)構(gòu)產(chǎn)生任何變化，直到設(shè)計者為它提供了屬性為止。
基本語法
元素的首尾標(biāo)記必須同時成對出現(xiàn)，且元素允許多重嵌套，也就是說，一個元素中可以嵌套任意多個元素。
文件范例
01
02
03
04
05
06p{line-height:1.5em;
07font-family:Tahoma;}
08.toolname{color:#FFFFFF;
09background-color:#AA0000;
10cursor:hand;}
11.helpfile{cursor:help;
12text-decoration:underline;}
13
14
15
16
17
18
文件說明
設(shè)計者對“HTML”和“CSS”兩個單詞使用了元素，其中style元素用前景色、背景色和鼠標(biāo)樣式定義，同時還對于語言編碼、鼠標(biāo)跟蹤文字提醒進行了lang和title屬性定義。對于“幫助文件”4個字，設(shè)計者利用元素的style屬性對它定義了下劃線和鼠標(biāo)樣式，同時也對語言解碼、鼠標(biāo)跟蹤文字提醒進行了lang和title屬性定義，onclick屬性可以插入腳本，設(shè)置用戶鼠標(biāo)單擊后的瀏覽器動作。
除了進行文本行內(nèi)定義，還可以對HTML元素和屬性無法定義的地方進行樣式設(shè)置。
文件范例
01
02
03
04
05
06li{line-height:3em;
07font-family:couriernew;
08font-size:18pt;}
09.bordered_text{border:solid1pxblack;
10padding:.5em;
11font-weight:bold;}
12
13
14
15
- 13
17
- 02
18
- 02
16
19
20
文件說明
利用，可以在任意位置對特定字符進行樣式格式化，即使字符包含在
2、塊級樣式定義
元素
屬于塊級樣式定義元素，它的插入會使原有結(jié)構(gòu)產(chǎn)生變化，所有
元素都會在新的一行產(chǎn)生一個文檔模型定義容器，等待設(shè)計者為它提供屬性。
基本語法
元素的首尾標(biāo)記必須同時成對出現(xiàn)，且
元素允許多重嵌套，也就是說，一個
元素中可以嵌套任意多個
元素。
文件范例
由于
元素是塊級元素，因此可以用CSS的position屬性對其進行相對或者絕對定位，一旦進行了絕對定位，一個
矩形區(qū)域就可以出現(xiàn)在一個HTML文檔的任何地方。
01
02
03
04
05
06body{background-color:black;}
.dig1,.dig2,.dig4,.dig6,.dig7{background-color:lime;}
.dig3,.dig5{background-color:#003300;}
07
08
09
10
11
12
14
15
16
17
18
19
該文檔沒有使用任何的表格和圖片，但是卻能模擬一個屏幕數(shù)字“5”，依靠的就是
元素的定位屬性和樣式屬性。一個數(shù)字中包含7個矩形塊，利用絕對定位放置在相應(yīng)位置，然后用背景色屬性模擬發(fā)光和變暗的效果。設(shè)計者可以修改