首頁 > 文章 > web前端 > 總結div和span的差異與用法

總結div和span的差異與用法

伊谢尔伦原創: 2017-06-05 14:19:147032瀏覽

什麼是span標籤元素？

在html標籤元素中，span元素是一個in-line元素，也就是一個內嵌元素。它的特點是不會獨佔一行。它和區塊（block）級元素是相對的，區塊級元素是獨佔一行的。 span元素沒有實際意義，它的存在純粹是為了應用樣式，給一段內容加上 #記可以透過在span上定義樣式來設定其內容的樣式。

什麼是DIV標籤元素？

DIV可定義文件中的分區或節（division/section）。 DIV標籤可以把文件分割成獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用 id 或 class 來標記 DIV，那麼該標籤的作用會變得更有效。 div標籤也被用來在HTML檔案中建立邏輯部分。但與 span標籤不同，工作於文字區塊一級，它在它所包含的HTML元素的前面及後面都引入了行分隔。

下面的文章中總結一下span標籤元素使用以及DIV和span的差異。

首先可以學習php中文網相關的免費課程

#1. 學習《HTML+CSS基礎入門教程》中的 HTML基礎教學之標籤章節

2. 觀看《黑馬程式設計師html影片教學》中文字DIV和span的標籤影片課程

##span標籤元素內容

1. 關於HTML5中p與span標籤的介紹只有在目標元素非常獨特,絕不會對網站上其他地方使用這個名詞時,才會使用ID.換句話說,只有絕對確定這個元素只會出現一次的情況下,才應該使用ID.如果你認為以後可能需要相似的元素,就使用類別.元素的主要作用就是對行內的元素進行分組或標識.2. 定義span的最小高度沒有效果的解決#曾經有朋友問：為什麼給用css給span定義高度和寬度後，它的寬度和高度仍然沒有變化，好像失效了一樣？其實這個問題很簡單－先要認清span的屬性，因為span屬於內聯元素，而內聯元素是忽略寬度和高度的，明白了這一點解決就很簡單了，解決的辦法就是利用css將span變成盒裝元素即可。 3. HTML 中的 span 標籤標準用途為何？

span裡面放文字還是放圖片還是放它東西才符合標準呢？ 無語意行內元素。 在段內定義與該段樣式不同的內容的樣式。

同時滿足以下條件的內容你可以使用span標籤：1、行內元素（inline）；2、無語意；

##3 、你需要為他加上特定樣式或做js鉤######子的時候。 ##################DIV標籤元素內容###################1. ###html中DIV標籤的使用方法#########

使用CSS－DIV，主要依靠標籤來實現，當你把HTML內容放在

標籤裡時，可以稱它為:“DIV塊”, “DIV 元素”, “CSS-layer”,或者簡單的稱之為“layer”。

2. Html5實作如何在兩個DIV元素之間拖放圖像

呼叫preventDefault() 來避免瀏覽器對資料的預設處理（drop 事件的預設行為是以連結形式開啟）透過dataTransfer.getData("Text") 方法獲得被拖曳的資料。此方法將傳回在 setData() 方法中設定為相同類型的任何資料。被拖曳資料是被拖曳元素的id ("drag1")把被拖曳元素追加到放置元素（目標元素）中

3. CSS設定DIV元素的透明度

Opacity=開始的不透明度(100的話就不透明了)
FinishOpacity=結束的不透明度(100的話就不透明了)
#Style=樣式，從0開始，1.2 .3....有均勻透明啊，放射形透明啊...
StartX=開始透明的X座標，基本上為圖片、層的左上角（0）
StartY= 開始透明的Y座標，基本上也為圖片、圖層的左上角（0）
FinishX=結束透明的X座標，基本上也圖片、圖層的右下（圖片、圖層的寬度）
FinishY=結束透明的Y座標，基本上也是圖片、層的右下角（圖片、層的高度）

DIV和SPAN的差異與用法

#1. HTML中DIV與span的差異說明

DIV標籤和SPAN標籤是將一些內容當成一個整體處理，例如，整體隱藏，整體移動。類似一個盒子一樣的東西。這樣做可以精簡程式碼，提高效率。

DIV是將內容放到一個長方形的區塊中，隨意移動會影響佈局。而span只是把內容定義成一個整體進行操作，不影響佈局和顯示。

2. DIV與span之間有什麼區別分析解釋

DIV和SPAN 元素最大的特點是預設都沒有對元素內的物件進行任何格式化渲染。主要用於套用樣式表。兩者最明顯的差異在於DIV是塊元素，而SPAN是行內元素(也譯作內嵌元素)。

3. 搞定CSS SPAN和DIV的區別

SPAN 和DIV 的區別在於，DIV(pision)是一個區塊級元素，可以包含段落、標題、表格，乃至諸如章節、摘要和備註等。而SPAN 是行內元素，SPAN 的前後是不會換行的，它沒有結構的意義，純粹是應用樣式，當其他行內元素都不合適時，可以使用SPAN。

相關問答

1. 這種元素標籤的style，怎麼覆掉導入的css

2. 浮動對span高度的影響

#3. 多個span 元素怎麼在容器大小差不多總是會掉下來