淺析HTML的元素類型及其轉換

　　你們都知道html是由標籤元素組成的，在瞭解元素的類型轉換以前，讓咱們先來了解一下html的元素類型。

　　1、html元素類型分爲兩種：塊級元素和內聯元素，內聯元素又被稱爲行內元素。

　　 常見的塊級元素有：div、o、dl、ul、li、h1至h六、p等，常見的內聯元素有span、label、a、img、input、b、i等。它們之間有何區別呢，下面就詳細演示一下。

　　一、塊級元素獨佔一行，內聯元素會與其它內聯元素處同一行。咱們看下面的代碼：

　　

<p>塊級元素p標籤</p>
<span>內聯元素one</span>
<span>內聯元素two</span>

　　咱們分別給p和span標籤一個背景色，而後看運行效果以下:

　　塊級元素默認寬度是父級元素的寬度，這裏咱們給P元素一個小點的寬度以後，它還會佔據一整行嗎？答案是確定的，效果以下：

　　內聯元素元素還有一個特性，就是當其所在行不能徹底放下本身的位置的時候，會截斷一分爲二，把剩下的部分放第二行，個別元素例外。

　　二、塊級元素默認寬度爲父級元素的寬度，內聯元素的寬度是內容天然撐開，而高度兩種元素都是內容天然撐開。

　　若是咱們單獨對塊級元素和內聯元素設置寬高會怎麼樣呢？咱們給上面的標籤添加以下樣式：

p{
	width:200px;
	height:200px;
	background-color:#ccc;
}
span{
	
	width:200px;
	height:200px;
	background-color:pink;
}

 　　運行的結果以下：

　　可見對塊級元素p標籤設置的寬高都有效，而對內聯元素設置的寬高是無效的，這是由於內聯元素不支持指定寬高，其寬高由內容天然撐開，而且受padding值的影響，咱們給第一個span標籤添加一個50px的padding值，效果以下： 

 

　　可見內聯元素span的寬高都有變化，這裏又出現了一個有趣的問題，細心的朋友確定發現了，變寬後的span標籤和上面的P標籤有一部分重疊了，這是爲何呢？由於內聯元素與其上下相鄰元素的距離不受padding值影響，可是與左右相鄰元素之間的距離是受padding值影響的。

　　在這裏，咱們再來看看margin值的影響，先給p標籤的margin一個50px的值，效果以下：

　　能夠看到塊級元素的外邊框值對上下左右都有效果。接下來咱們去掉p標籤的margin值，而後給第一個span寫上margin：50px，獲得以下效果：

　　可見對於內聯元素，它的margin值和padding同樣只對左右相鄰元素的距離產生效果，而對上下相鄰元素的距離無影響。

　　三、塊級元素和內聯元素還有一個不一樣點，就是塊級元素能包裹塊級元素和內聯元素，而內聯元素只能包裹內聯元素，不能包裹塊級元素。好比，你能夠在div裏放div、ul、img、span等等，都能正常顯示，而在span中能夠放b、i等，不能放div、p之類，這裏就不上圖了，感興趣的朋友下來本身試。

　　4、總結：通俗一點理解，塊級元素就比如一個大人物，在頁面上無論本身胖瘦都要獨佔一排。只要它說了讓你離它遠點，你就得遠點，遠多少都由它決定（margin值）。大人物家大業大，家裏再養幾個大人物和小人物都沒有問題（能夠包裹塊級和內聯元素）。

　　而內聯元素呢，比如一個小人物，在頁面上和別的小人物們都是坐一排，一排坐滿了自動坐第二排。左右兩邊胳膊動一動（設置margin的左右值），可讓左右的小人物們離本身遠點，可是對於本身上下的人物就無法了。家裏呢，養幾個小人物還能夠，大人物就養不起了（不能包裹塊級，只能包裹內聯）。

　　在這裏須要注意的是，有兩個特例，塊級元素中的p標籤是不能包裹塊級元素的，內聯元素中的a標籤能夠包裹任何元素。另外內聯元素input和img都支持部分塊級元素的特性，好比設置寬高和上下margin值有效。

　　2、接下來咱們來說講塊級元素和內聯元素之間的轉換

　　在網頁佈局中，咱們經常會須要塊級元素具備內聯元素的特徵，好比58同城的這個導航欄：

　　是用ul來實現的，ul中的li是塊級元素，默認是獨佔一行，但在這裏咱們須要它橫排顯示，這時候就用到了元素的類型轉換。

　　想讓一個塊級元素轉換成內聯元素，在其樣式中設置display:inline，再設置寬度就能夠了，可是這裏咱們不能這樣設置，由於inline值會把塊級元素徹底轉換爲內聯元素，而再也不具備塊級元素的特性，這裏咱們仍須要在li裏放置塊級標籤，因此這裏咱們用另一個寫法，設置display:inline-block，這樣會將li轉化爲行內塊元素，使其既能橫排排列又能包裹塊級元素。

　　下面咱們來詳細說一下display這個屬性，它用來作元素類型轉換總共能夠設置三個值：inline，inline-block，block。inline是將一個元素轉換爲內聯元素，inline-block轉換爲行內塊元素，block是轉換爲塊元素。其中inline-block使用的最多，咱們能夠一塊兒再來看一個將內聯元素轉換爲行內快元素的例子，先上圖：

　　這樣一個豎排的導航欄，通常咱們用ul來實現，代碼以下：

<ul>
	<li id="li-01"> <a href="#"></a> </li>
	<li id="li-02"> <a href="#"></a> </li>
	<li id="li-03"> <a href="#"></a> </li>
	<li id="li-04"> <a href="#"></a> </li>
	<li id="li-05"> <a href="#"></a> </li>
</ul>

　　經過給li設置背景圖片和寬高等就能顯示成圖上的樣子，li中包含了一個a標籤，a標籤裏沒有任何內容，做爲一個內聯元素，此時的a標籤沒有大小，因此咱們在頁面上根本點擊不到它，咱們但願達到的效果是用鼠標點擊li的時候就能觸發a標籤的連接，因此此時咱們給a標籤作以下處理：

a{
	display:inline-block;
	width:40px;
	height:40px;
}

　　經過把a標籤轉換爲行內塊元素，再給它設置和li同樣的寬高，就可以實現效果。這裏直接把a標籤轉換爲塊元素的效果也是同樣的。

　　最後補充一點，display的block值不只有將元素轉換爲塊元素的做用，還有顯示元素的做用，若是你在樣式初始化的時候寫了這樣一句代碼：*{display:block;}，經過通配符把全部標籤的display值設爲block，你就會發現你寫在head標籤裏的titile標籤和style標籤等的內容都會被顯示在頁面上。這個屬性值，咱們通常是和display:none（不顯示），配合起來用的。好比咱們經常看到一些導航欄，當鼠標放上去的時候，會出現一個二級導航欄，鼠標移開的時候二級導航欄又會消失不顯示，就是經過display的這兩個屬性值來控制的。

　　display這個屬性很是強大，至關於能把元素打回孃胎重造，上面講到的只是它的冰山一角，在css3中又引入了不少新的用法，好比display:flex將元素設置爲一個彈性盒子，在這裏就不一一介紹了。