css塊級標簽，行內標簽，行內塊標簽的轉換
- 本文原創作者：雨點的名字
- 作者博客地址：https://home.cnblogs.com/u/qdhxhz/
在基礎1中，我詳細講了css的常見屬性，幾種不同的選擇器，在此基礎之上我們來進一步地認識它們的特性從而更好地學習和掌握相關開發技能。
HTML標簽的分類
在講標簽分類的時候，我們作為初學者在剛使用標簽的時候會發現有些屬性在一些標簽上不起作用，比如寬、高、水平居中等，其實這個屬性的使用只有在塊級標簽上使用才起作用。個人認為這個也是初學者非常容易忽略的地方，所以我就把它記下來！
首先我們可以按照顯示的不同將HTML標簽分為：塊級標簽，行內標簽，行內塊標簽；現對其分別介紹。
塊級標簽
特點：獨占一行，對高度、寬度、行高以及頂和底邊距都可設置的屬性值生效；如果不給寬度，塊級元素就默認為瀏覽器的寬度，即就是100%寬；
典型的塊級標簽有：<div> ，h系列，<li>，<dt>，<dd>，<p> ，<form>，<ul>
行內標簽
特點：可以多個標簽存在一行，不能直接設置行內標簽的高度、寬度、行高以及頂和底邊距，完全靠內容撐開寬高！
典型的行內標簽有：<span>，<a>，<b>，<i>，<u>，<em>，<strong>，<label>，<br>
行內塊標簽 ：
特點：結合的行內和塊級的有點，不僅可以對寬高屬性值生效，還可以多個標簽存在一行顯示；
典型的行內標簽有：<img>，<input>
那么有的同學就會想了，難道我就不可以控制span或者font的寬高了嗎？可以的，那么我們這次拋開浮動和定位不說，就說通過display屬性來將它們互相轉換：
1、塊級標簽轉換為行內標簽：display:inline;
2、行內標簽轉換為塊級標簽：display:block;
3、轉換為行內塊標簽：display：inline-block;
只要給對應的標簽使用這個display這個屬性，取相應的值，就可以將顯示模式互相轉換。
下面請看如下示例：
1：將行內標簽轉換為塊級標簽
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>行內標簽轉塊級標簽</title> 5 <style type="text/css"> 6 a{ 7 width: 200px; 8 height: 200px; 9 background-color: red; 10 display: block; 11 } 12 </style> 13 </head> 14 <body> <!--正常情況a標簽作為一個行內標簽你設置長和寬是沒有效果的--> 15 <a href="https://www.baidu.com">百度</a> 16 </body> <!--而當你用display: block;代表行內標簽轉為塊級標簽--> 17 </html>
運行結果如下;點紅色任意一區域都能實現跳轉到百度，所以他可以實現擴大鏈接范圍。
2：將行內標簽轉換為行內塊標簽
上面已經講過行內塊級標簽和塊級標簽的區別，我在強調一遍：塊級標簽和行內塊級標簽都是可以設置長和寬的，但塊級標記當你設置好后
它是自動換行的，你不能在這一行再放其它東西，而行內塊級標簽在同一行中可以放置多個行內標簽，具體我有案例來解釋。
1 <html> 2 <head> 3 <title>塊級和行內塊級</title> 4 <style type="text/css"> 5 a{ 6 width: 100px; 7 height: 100px; 8 background-color: green; 9 display: inline-block; 10 } 11 div{ 12 width:100px; 13 height:100px; 14 background-color: red; 15 margin-top:10px; /* margin-top是來設置上下兩個塊的上下間距，關於盒子下一節我單獨來講*/ 16 } 17 </style> 18 </head> 19 <body> 20 <a href="https://www.baidu.com">百度</a> <!--通過 display: inline-block;就可以將行內標簽轉為行內塊級標簽--> 21 <a href="https://www.baidu.com">百度一下</a> 22 <div>我是div1</div> <!--這個是一般的塊級標簽，會上下分行--> 23 <div>我是div2</div> 24 </body> 25 </html>
運行結果：
3.將塊級標簽轉換為行內標簽
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>塊級標簽轉行內標簽</title> 5 <style type="text/css"> 6 div{ 7 width: 100px; 8 height: 100px; 9 background-color: red; 10 display: inline; 11 } 12 </style> 13 </head> 14 <body> 15 <div>谷歌</div> <!--按道理div是塊級可以設置長和寬當通過display: inline;它已經是行內標簽了，所以長和寬失效--> 16 <div>https://www.google.com</div> 17 </body> 18 </html>
效果如下：
有關塊級標簽，行內標簽，行內塊級標簽我就先寫到這里，也歡迎大家看了之后能夠多指點，感謝。