div與span區別及用法

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的樣式為文字為紅色。