在講標籤分類的時候，我們作為初學者在剛使用標籤的時候會發現有些屬性在一些標籤上不起作用，比如寬、高、水平置中等，其實這個屬性的使用只有在塊級標籤上使用才起作用。個人認為這個也是初學者非常容易忽略的地方，所以我就把它記下來！
首先我們可以按照顯示的不同將HTML標籤分為：塊級標籤，行內標籤，行內塊標籤；現對其分別介紹。
塊級標籤
特點：獨佔一行，對高度、寬度、行高以及頂和底邊距都可設定的屬性值生效；如果不給寬度，區塊層級元素就預設為瀏覽器的寬度，即就是100%寬；
典型的塊級標籤有：<p> ，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：將行內標籤轉換為塊級標籤
<!DOCTYPE html><html> <head> <title>行內標籤轉塊級標籤</title> <style type="text/css"> a{ width: 200px; height: 200px; background-color: red; display: block; } </style> </head> <body> <!--正常情況a標籤作為一個行內標籤你設定長和寬是沒有效果的--> <a href="https://www.baidu.com">百度</a> </body> <!--而當你用display: block;代表行內標籤轉為塊級標籤--></html>
運行結果如下;點紅色任意一地區都能實現跳轉到百度，所以他可以實現擴大連結範圍。
2：將行內標籤轉換為行內塊標籤
上面已經講過行內塊級標籤和塊級標籤的區別，我在強調一遍：塊級標籤和行內塊級標籤都是可以設定長和寬的，但塊級標記當你設定好後
它是自動換行的，你不能在這一行再放其它東西，而行內塊級標籤在同一行中可以放置多個行內標籤，具體我有案例來解釋。
<html> <head> <title>塊級和行內塊級</title> <style type="text/css"> a{ width: 100px; height: 100px; background-color: green; display: inline-block; } p{ width:100px; height:100px; background-color: red; margin-top:10px; /* margin-top是來設定上下兩個塊的上下間距，關於盒子下一節我單獨來講*/ } </style> </head> <body> <a href="https://www.baidu.com">百度</a> <!--通過 display: inline-block;就可以將行內標籤轉為行內塊級標籤--> <a href="https://www.baidu.com">百度一下</a> <p>我是p1</p> <!--這個是一般的塊級標籤，會上下分行--> <p>我是p2</p> </body></html>
運行結果：
3.將塊級標籤轉換為行內標籤
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>塊級標籤轉行內標籤</title> 5 <style type="text/css"> 6 p{ 7 width: 100px; 8 height: 100px; 9 background-color: red;10 display: inline;11 }12 </style>13 </head>14 <body>15 <p>Google</p> <!--按道理p是塊級可以設定長和寬當通過display: inline;它已經是行內標籤了，所以長和寬失效-->16 <p>http://www.php.cn</p>17 </body>18 </html>
效果如下：
有關塊級標籤，行內標籤，行內塊級標籤我就先寫到這裡，也歡迎大家看了之後能夠多指點，感謝。
更多css塊級標籤，行內標籤，行內塊標籤的轉換（2）相關文章請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
