在使用div和span標籤的時候，有時候總是糊里糊塗的搞不清楚其具體的屬性用法規則，那麼今天我們就來看看它們到底如何運用

首先 我們看看<div>標籤，div這個標籤是用來劃分區域的，它是個塊級元素block（塊級元素就是它獨自佔領網頁的一行）如果兩個div 那麼它們會是一個上，一個下，如圖所示

那麼<div></div>的元素例如字型部分的左右會被div控制不超出，但是下面則會隨著字型數量超出紅線框，圖片也是如此比如圖片大小也會超出，當然你可以設定div的屬性overfloat為hidden就會隱藏超出部分，如下圖所示

下面我們來看看<span></span>標籤，span標籤是個行內元素（行內元素就是在瀏覽器的一行上）比如span裡面的元素不會換到下一行會，但是span元素的高寬沒有效果，它的高寬是隨著span內元素的數量來決定的，如果想設定span元素的寬高那麼你需要設定dispaly為line-block，如圖我們設定span寬高為10px 但是它沒有效果遠遠超出了10px

這是兩個span標籤放在一起，如下圖所示，證明了span是行內元素它們位於同一行（注：span設定了line-block所以寬高有效果）

下面我們定義display：line-block  高寬設定100px來看看效果

最後給大家畫下  行內塊元素和塊元素的圖形