SPAN和DIV,Class與ID的區(qū)別匯總
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:26:17 作者：佚名 
我要評(píng)論
我要評(píng)論SPAN 和 DIV 的區(qū)別
SPAN 和 DIV 的區(qū)別在于，DIV(division)是一個(gè)塊級(jí)元素，可以包含段落、標(biāo)題、表格，乃至諸如章節(jié)、摘要和備注等。而SPAN 是行內(nèi)元素，SPAN 的前后是不會(huì)換行的，它沒(méi)有結(jié)構(gòu)的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，可以使用SPAN。
<
SPAN 和 DIV 的區(qū)別
SPAN 和 DIV 的區(qū)別在于，DIV(division)是一個(gè)塊級(jí)元素，可以包含段落、標(biāo)題、表格，乃至諸如章節(jié)、摘要和備注等。而SPAN 是行內(nèi)元素，SPAN 的前后是不會(huì)換行的，它沒(méi)有結(jié)構(gòu)的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，可以使用SPAN。
<span>SPAN標(biāo)記有一個(gè)重要而實(shí)用的特性，即它什么事也不會(huì)做，</span><span>它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以為它們指定樣式了。在此例中，</span><span>標(biāo)識(shí)符允許你將一個(gè)段落分成不同的部分。</span>
<div>還有一個(gè)標(biāo)識(shí)符具有類(lèi)似的功能，DIV也被用來(lái)在HTML文件中建立邏輯部分。</div><div>但與SPAN不同，工作于文本塊一級(jí)，</div><div>它在它所包含的HTML元素的前面及后面都引入了行分隔。</div>
------------------------------------------------------------ CLASS和ID的區(qū)別
在樣式表定義一個(gè)樣式的時(shí)候，可以定義id也可以定義class。
1、在CSS文件里書(shū)寫(xiě)時(shí)，ID加前綴“#”；CLASS用“.”
2、id一個(gè)頁(yè)面只可以使用一次；
class可以多次引用。
3、ID是一個(gè)標(biāo)簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象名字，如果一個(gè)屋子有2個(gè)人同名，就會(huì)出現(xiàn)混淆；
CLASS是一個(gè)樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上，就象一件衣服；
4、從概念上說(shuō)就是不一樣的：
id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；
class是先定義好一種樣式，再套給多個(gè)結(jié)構(gòu)/內(nèi)容。
目前的瀏覽器還都允許用多個(gè)相同ID，一般情況下也能正常顯示，不過(guò)當(dāng)你需要用JavaScript通過(guò)id來(lái)控制div時(shí)就會(huì)出現(xiàn)錯(cuò)誤。
看完本文后,您還可以看：
css教程：網(wǎng)頁(yè)中Span和Div的區(qū)別
SPAN 和 DIV 的區(qū)別在于，DIV(division)是一個(gè)塊級(jí)元素，可以包含段落、標(biāo)題、表格，乃至諸如章節(jié)、摘要和備注等。而SPAN 是行內(nèi)元素，SPAN 的前后是不會(huì)換行的，它沒(méi)有結(jié)構(gòu)的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，可以使用SPAN。
<span>SPAN標(biāo)記有一個(gè)重要而實(shí)用的特性，即它什么事也不會(huì)做，</span><span>它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以為它們指定樣式了。在此例中，</span><span>標(biāo)識(shí)符允許你將一個(gè)段落分成不同的部分。</span>
<div>還有一個(gè)標(biāo)識(shí)符具有類(lèi)似的功能，DIV也被用來(lái)在HTML文件中建立邏輯部分。</div><div>但與SPAN不同，工作于文本塊一級(jí)，</div><div>它在它所包含的HTML元素的前面及后面都引入了行分隔。</div>
------------------------------------------------------------ CLASS和ID的區(qū)別
在樣式表定義一個(gè)樣式的時(shí)候，可以定義id也可以定義class。
1、在CSS文件里書(shū)寫(xiě)時(shí)，ID加前綴“#”；CLASS用“.”
2、id一個(gè)頁(yè)面只可以使用一次；
class可以多次引用。
3、ID是一個(gè)標(biāo)簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象名字，如果一個(gè)屋子有2個(gè)人同名，就會(huì)出現(xiàn)混淆；
CLASS是一個(gè)樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上，就象一件衣服；
4、從概念上說(shuō)就是不一樣的：
id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；
class是先定義好一種樣式，再套給多個(gè)結(jié)構(gòu)/內(nèi)容。
目前的瀏覽器還都允許用多個(gè)相同ID，一般情況下也能正常顯示，不過(guò)當(dāng)你需要用JavaScript通過(guò)id來(lái)控制div時(shí)就會(huì)出現(xiàn)錯(cuò)誤。
看完本文后,您還可以看：
css教程：網(wǎng)頁(yè)中Span和Div的區(qū)別
相關(guān)文章
如何實(shí)現(xiàn)div 圖片在DIV內(nèi)水平居中
本文介紹了div 圖片如何在DIV內(nèi)水平居中，無(wú)論文字居中、圖片居中等內(nèi)容居中我們都可以使用以上兩種方法實(shí)現(xiàn)，一般推薦使用CSS進(jìn)行，但網(wǎng)頁(yè)多時(shí)候，我們只需要修改CSS文件2021-11-30
DIV CSS實(shí)現(xiàn)網(wǎng)頁(yè)背景半透明效果
DIV半透明實(shí)現(xiàn)，使用CSS實(shí)現(xiàn)DIV成半透明效果，CSS實(shí)現(xiàn)層與背景半透明效果。本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-11-30
新手在使用web標(biāo)準(zhǔn)（div css）開(kāi)發(fā)網(wǎng)頁(yè)的時(shí)候，遇到第一個(gè)問(wèn)題是div與span有什么區(qū)別，什么時(shí)候用div，什么時(shí)候用span標(biāo)簽。下面小編就通過(guò)本文給大家講解下，感興趣的朋友2021-11-30
這篇文章主要介紹了設(shè)置div背景透明的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2021-02-20
CSS實(shí)現(xiàn)div不設(shè)高度完全居中
這篇文章主要介紹了CSS實(shí)現(xiàn)div不設(shè)高度完全居中，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2021-02-04
這篇文章主要介紹了div自適應(yīng)高度自動(dòng)填充剩余高度,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2020-07-08詳解DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法
這篇文章主要介紹了DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-11-15- 這篇文章主要介紹了DIV或者DIV里面的圖片水平與垂直居中的方法,需要的朋友可以參考下2018-11-15
詳解如何用div實(shí)現(xiàn)自制滾動(dòng)條
這篇文章主要介紹了詳解如何用div實(shí)現(xiàn)自制滾動(dòng)條,滾動(dòng)條是瀏覽器中最常見(jiàn)的組件了。想要學(xué)習(xí)如何自制滾動(dòng)條的方法，需要了解的朋友可以參考下2018-03-21- Div布局是學(xué)習(xí)的重點(diǎn)，這篇文章主要為大家詳細(xì)介紹了div對(duì)齊與網(wǎng)頁(yè)布局的相關(guān)學(xué)習(xí)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-31
