简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

在HTML的網頁版面裡div與span有什麼差別

php中世界最好的语言
發布： 2017-12-01 15:03:22
原創
2277 人瀏覽過

很多剛入行的朋友不是很懂這兩個標籤的差別，可能大家認為SPAN也是一塊，DIV也是一塊，同樣的作用為啥有兩個標籤呢？本篇文章就給大家解答這個疑惑。

DIV與SPAN的區別與特點

以下是在沒有對開發網頁頁面設定css樣式時候情況下，系統預設的介紹
div與span區別
div所佔的位置是一行，
span佔用的是內容有多寬就佔用多寬的空間距離

分析：從上圖很容易知道「我是內容一；用的div」和“我是內容二；使用的div”兩個內容外部用的是

標籤，他們得到樣式是佔用了一排空間（相當於換行一樣）；而“我是內容三；用的span”和「我是內容四；用的span」則，文字內容有多寬，就佔用多寬距離，使用標籤和不使用一樣效果。

span標籤小結  

在網頁開發的時候使用div和span都可以，通常可以理解為沒有什麼差別。但注意的是div佔用一行，span不會佔用一行，內容佔多大寬度，span就有多寬。

擴充功能與提升

div內的span無須命名css選擇器偽類別，範例如下
若div的class為yangshi，則對內的span設定css屬性則，程式碼如下
.yanshi span{屬性及屬性值}


相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS裡的盒子模型的種類差異

Css3製作動態開關的效果的實作步驟

CSS3的content屬性實作步驟

#

以上是在HTML的網頁版面裡div與span有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
html span 什麼
來源：php.cn
上一篇：css裡的font文字怎麼設定 下一篇：CSS的文字字體顏色如何設定
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
具有未知選擇器和子項目的 Javascript 事件委託 我有一個動態選擇器（linkTrigger），它應該可以捕捉元素上的點擊。我不知道linkTrigger可能是什麼，也不知道它是否會有一些孩子。當我使用jQuery時，一切都很好。...
來自於 2024-04-03 23:39:19
0
1
420
是否可以在不使用 div 的情況下在同一行上有多個 span 類別？ 我想讓每個文字都有不同的顏色，所以我使用了多個跨度類別來設定css中的顏色。我還希望文字有換行符，所以我使用了div。這個小提琴顯示了我想要的結果，但是用於換行符的div標籤產生了...
來自於 2024-04-03 11:17:18
0
1
360
在同一頁面上的多個位置顯示庫存計數器 這個腳本作為股票倒數計時效果很好，但我無法在同一頁上超過1個位置顯示它。例如，同一頁面上有4或5個產品/計劃，每個產品顯示的庫存數量不同，數量變化的時間也不同。僅在1個產品上顯示。...
來自於 2024-04-02 14:25:38
0
2
2529
如何在HTML/JavaScript中使用for迴圈遍歷span標籤？ 如何壓縮這麼多span標籤？我正在努力讓它盡可能小。任何建議都有幫助，謝謝！ <header><ahref="#"class="lo...
來自於 2024-03-31 16:15:40
0
1
341
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！