Div+CSS教程系列16：關於html塊級元素和行內元素的一些不得不知

在本節開始之前，我想特別提醒一下大家，雖然這一節的說得有點多，但是其中說到的東西都是以後你們要經常面對的問題，所以務必認真看完。

看完前面的10多期div+css教程系列後，我想你只要認真看了，並且認真去理解了，那麼現在自己用div+css制作一個簡單的網頁應該不是什麼難題。

但是大家在寫一個復雜一點的頁面HTML結構時，我想肯定或多或少還是會有一些問題，所以這一節中就具體說一下html結構中新手容易犯，而且犯了之後還不知道是什麼原因引起的一個錯誤，就是塊級元素和行內元素在html結構中的一些關系。

至於什麼是塊級元素和行內元素，這個我想有點基礎的人都知道，塊級元素，通過字面意義就可以看出其實它就是一個塊，既然是一個塊，肯定可以設置高度和寬度，但是如果你不給它設置寬度的情況下，它的寬度是包含它的那個容器的百分之百，在沒有CSS對其進行控制的情況下，每一個塊在浏覽器中顯示時都將以新的一行開始，也就是說如果沒有使用CSS樣式的情況下，一個塊元素不可能跟另一個塊元素並排處在同一行。塊元素中可以嵌入其它塊元素或者行內元素，當然，某些特殊的塊元素中是不能嵌入塊元素的,比如：p元素、h1-h6。

div是我們在網頁制作過程中用得最多的塊元素之一。

當然，塊級元素和行內元素是可以通過CSS樣式來互相轉換的，也就是說一個html結構中的塊元素我們可以通過CSS樣式的控制，讓浏覽器在解析它的時候認為它是一個行內元素，同樣的道理，一個html結構中的行內元素我們也可以通過CSS樣式的控制，讓浏覽器在解析它的時候把它當成一個塊級元素來解析。關於互相轉換這個問題，我們下節課再來講解，這節課就暫時不講了。

至於具體的哪些html標簽是屬於塊級元素呢，這個問題大家自己去百度一下，其實也不是很多，20來個的樣子。

關於行內元素，另一種叫法也叫內聯元素。跟塊級元素的差異就在於：它在浏覽器中顯示時不會以新的一行開始，它的寬和高也不可控制，它的寬高是由它內部的文字或圖片來決定的，上下邊距不可控制，但左右邊距可控制，行內元素中只能嵌入其它行內元素，不能嵌入塊元素，常用的行內元素有span ,b,em,a等

至於具體的哪些html標簽是屬於行內元素呢，這個問題也留給大家自己去百度一下。

接下來我們進入今天的主題,我來說說我們在用html時，經常遇到的一些關於行內元素和塊元素方面的問題。其實知道自己犯了什麼問題後，解決起來並不難，但問題就在於，很多時候我們犯了錯，卻並不知道。所以我希望大家在認真看完這篇文章後，以後在使用html和CSS制作網頁時，不要再犯同樣的錯誤。

首先來看一個在新手中很常見的問題，我們先看一段代碼：

<p><span>我是一個行內元素</span><span>我也是一個行內元素</span></p>
<p><div>我是一個塊元素</div><div>我也是一個塊元素</div></p>
<h1><div>我是一個塊元素</div><div>我也是一個塊元素</div></h1>

在上面的三行代碼中，真正符合xhtml標准的只有第一條，當然，我們在實際運用中，特別是新手，在寫xhtml結構時並沒有完全遵循xhtml標准，因為即使你不完全遵循xhtml標准來嵌套xhtml標簽，我們在浏覽器中浏覽時也不一定會出錯，這就導致了很多新手經常亂嵌套xhtml標簽，而且還一直認為這樣是對的。 但是，作為一個合格的前端人員來說，遵守w3c標准是最起碼的。

接下來我們先看看上面這段代碼在浏覽器中的效果：

這一眼看上去好像倒沒什麼不對的地方，我們可以看出，第一個塊元素p當中由於是嵌套了兩個行內元素，所以那兩個行內元素都並排在一行，第二個塊元素p和第三個塊元素h1當中嵌套了兩個div塊級元素，理所當然的，它們就各占了一行，分成了兩行。，不換行的行內元素沒有換行，應該換行的div塊元素也確實是換行了，感覺好像都挺正常的。

別急，接下來我們給這些html標簽寫入樣式：

 body,p,span,h1 {margin:0;padding:0;}
p,h1{background:#f60;margin:10px;}

在上面的樣式中，我先把默認的margin和padding初始化，然後給p元素和h1設置了一個背景顏色，一個外邊距10px

我們看看浏覽器中的效果是什麼樣的：

我們發現，第一個p元素和最後一個h1元素是正常的，有背景，外邊距也是正常的。第二個p元素卻不正常了，咋回事呢？