div與span區別及用法

2021-06-18 23:25:54 字數 1100 閱讀 7060

div與span區別div與san用法

接下來了解在div+css開發的時候在html網頁製作,特別是標籤運用中div和span的區別及用法。新手在使用web標準(div css)開發網頁的時候,遇到第乙個問題是div與span有什麼區別什麼時候用div,什麼時候用span標籤

目錄特點與區別

小結知識擴充套件

案例效果演示

以下是在沒有對開發網頁頁面設定css樣式時候情況下,系統預設情況下的介紹

div與span區別

div占用的位置是一行,

span占用的是內容有多寬就占用多寬的空間距離,說明如下圖

sapn標籤使用案例截圖

分析:從上圖很容易知道「我是內容一;用的div」和「我是內容二;用的div」兩個內容外部用的是標籤,他們得到樣式是占用了一排空間(相當於換行一樣);而「我是內容三;用的span」和「我是內容四;用的span」則,文字內容有多寬,就占用多寬距離,使用標籤和不使用一樣效果。

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

div內的span無需命名css選擇器偽類,例子如下

如果div的class為yangshi,則對內的span設定css屬性則,**如下

對span設定css樣式截圖

分析上圖:可以得出span無需再命名偽類名,直接使用css繼承屬性來對span設定css樣式。這裡本來div內的樣式為對文字設定藍色字,但是又通過繼承方式設定了span的樣式為文字為紅色。

希望divcss5**總結的css案例對你有幫助,這裡是關於div與span區別及用法介紹講解技術文章。

div與span區別及用法

div與span區別 div占用的位置是一行,span占用的是內容有多寬就占用多寬的空間距離,說明如下圖 分析 從上圖很容易知道 我是內容一 用的div 和 我是內容二 用的div 兩個內容外部用的是標籤,他們得到樣式是占用了一排空間 相當於換行一樣 而 我是內容三 用的span 和 我是內容四 用...

div與span區別及用法

div與span區別及div與san用法篇 接下來了解在div css開發的時候在html網頁製作,特別是標籤運用中div和span的區別及用法。新手在使用web標準 div css 開發網頁的時候,遇到第乙個問題是div與span有什麼區別,什麼時候用div,什麼時候用span標籤。目錄特點與區別...

span 與 div 的區別

span 和 div 的區別在於 第一種解釋 div division 是乙個塊級元素,可以包含段落 標題 乃至諸如章節 摘要和備註等。而span 是行內元素。span 的前後是不會換行的,它沒有結構的意義,純粹是應用樣式,當其他行內元素都不合適時,可以使用span。span span標記有乙個重要...