SPAN元素和DIV元素有的區(qū)別
更新時(shí)間：2007年02月02日 00:00:00 作者：
前幾天做自適應(yīng)Skin的時(shí)候了解了一下塊(block)的含義。發(fā)現(xiàn)了這樣的一個(gè)問(wèn)題。
SPAN元素和DIV元素有什么區(qū)別
解決思路：
最明顯的區(qū)別是：DIV是塊元素，SPAN是內(nèi)嵌元素。塊元素相當(dāng)于內(nèi)嵌元素在前后各加一個(gè)<br>換行。其實(shí)，塊元素和行內(nèi)元素也不是一成不變的，只要給塊元素定義display:inline，塊元素就成了內(nèi)嵌元素，同樣地，給內(nèi)嵌元素定義了display: block就成了塊元素了。
具體步驟：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
技巧：有些朋友會(huì)說(shuō)DIV是層標(biāo)簽，其實(shí)HTML里是沒有層這個(gè)說(shuō)法的，只不過(guò)是為了易于理解，Dreamweaver里才這樣寫的，每個(gè)對(duì)象都可以成為 “層”，只需要給對(duì)象定義position屬性(值為absolute或relavite)。例如，要讓圖片成為“層”，可以這樣寫代碼：
特別提示
本例代碼運(yùn)行效果（點(diǎn)運(yùn)行代碼）所示，為了更能說(shuō)明問(wèn)題，這里給塊元素和內(nèi)嵌元素都加了1像素寬的紅色實(shí)線邊框，從圖中可以看到， DIV默認(rèn)為塊元素，定義display屬性值為inline后以內(nèi)嵌元素顯示，而SPAN默認(rèn)為內(nèi)嵌元素，定義display屬性值為block后則以塊元素顯示。
特別說(shuō)明
本例主要說(shuō)明了display屬性的兩個(gè)值block和inline的用法及意義。
SPAN元素和DIV元素有什么區(qū)別
解決思路：
最明顯的區(qū)別是：DIV是塊元素，SPAN是內(nèi)嵌元素。塊元素相當(dāng)于內(nèi)嵌元素在前后各加一個(gè)<br>換行。其實(shí)，塊元素和行內(nèi)元素也不是一成不變的，只要給塊元素定義display:inline，塊元素就成了內(nèi)嵌元素，同樣地，給內(nèi)嵌元素定義了display: block就成了塊元素了。
具體步驟：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
技巧：有些朋友會(huì)說(shuō)DIV是層標(biāo)簽，其實(shí)HTML里是沒有層這個(gè)說(shuō)法的，只不過(guò)是為了易于理解，Dreamweaver里才這樣寫的，每個(gè)對(duì)象都可以成為 “層”，只需要給對(duì)象定義position屬性(值為absolute或relavite)。例如，要讓圖片成為“層”，可以這樣寫代碼：
特別提示
本例代碼運(yùn)行效果（點(diǎn)運(yùn)行代碼）所示，為了更能說(shuō)明問(wèn)題，這里給塊元素和內(nèi)嵌元素都加了1像素寬的紅色實(shí)線邊框，從圖中可以看到， DIV默認(rèn)為塊元素，定義display屬性值為inline后以內(nèi)嵌元素顯示，而SPAN默認(rèn)為內(nèi)嵌元素，定義display屬性值為block后則以塊元素顯示。
特別說(shuō)明
本例主要說(shuō)明了display屬性的兩個(gè)值block和inline的用法及意義。
相關(guān)文章
雖然CSS中的min-width、min-height、max-width、max-height屬性在CSS中早有出現(xiàn)，不過(guò)支持此屬性的瀏覽器使用比率都不高，比如Firefox。2008-01-01
HTML5新增了多個(gè)常用標(biāo)簽,如figure、figcaption、details、mark等,figure用于獨(dú)立流內(nèi)容,figcaption為其標(biāo)題,details用于文檔細(xì)節(jié),mark用于標(biāo)記文本,progress顯示進(jìn)度,meter表示已知范圍,menu創(chuàng)建菜單,command定義按鈕,nav用于導(dǎo)航2024-11-11
兼容Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21的圖片垂直居中效果代碼2008-05-05
對(duì)設(shè)置樣式時(shí)怎么區(qū)分input是按鈕還是文本框問(wèn)題的技術(shù)調(diào)查——把input里面的東西剔出來(lái)2008-09-09
css有序列表實(shí)現(xiàn)方法與html標(biāo)簽說(shuō)明2008-07-07
Css利用js的expression實(shí)現(xiàn)的效果
Css利用js的expression實(shí)現(xiàn)的效果...2007-02-02
CSS布局中可以用javascript判斷瀏覽器版本 看如下的javascript腳本：2008-07-07
低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案
現(xiàn)在我們可以選擇瀏覽器非常多，所以瀏覽器的環(huán)境也是種類繁多，同一個(gè)瀏覽器也是包含各種不同的版本，不同的版本之間的渲染方法也存在差異，它們支持的 HTML5、CSS3 特性恐怕也不盡相同。這種情況于是造成Web開發(fā)者在開發(fā)網(wǎng)站時(shí)，要面對(duì)數(shù)量龐大的瀏覽器種類2014-03-03
一些很不錯(cuò)的css技巧,但也常為人們所忽略...2007-05-05
告別AJAX實(shí)現(xiàn)無(wú)刷新提交表單
通常對(duì)于無(wú)刷新提交表單，我們都是運(yùn)用ajax實(shí)現(xiàn)的。前段時(shí)間了解到另一種無(wú)刷新提交表單的方法。現(xiàn)在整理出來(lái)分享給大家。2014-05-05