標籤的型別(顯示模式)

    HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。

1.塊級元素（block-level）

    每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。總而言之就是比較霸道。

塊級元素的特點：

（1）總是從新行開始

（2）高度，行高、外邊距以及內邊距都可以控制。

（3）寬度預設是容器的100%

（4）可以容納內聯元素和其他塊元素。

2.行內元素（inline-level）

    行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字型大小和影象尺寸來支撐結構，一般不可以設定寬度、高度、對齊等屬性，常用於控制頁面中文字的樣式。

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。

行內元素的特點：

（1）和相鄰行內元素在一行上。

（2）高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。

（3）預設寬度就是它本身內容的寬度。

（4）行內元素只能容納文字或則其他行內元素。（a特殊）

3.行內塊元素（inline-block）

行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）預設寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。

4.標籤顯示模式轉換（display）

塊轉行內：display:inline;

行內轉塊：display:block;

塊、行內元素轉換為行內塊： display: inline-block;

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: red;
            display: block;
        }
        .test{
            width: 100px;
            height: 100px;
            background-color: red;
            display: inline-block;
        }
        
    </style>

<div>123</div>
<div>123</div>
<span>abc</span>
<span>abc</span>
<span>abc</span>
<div class="test">789</div>
<div class="test">789</div>
<div class="test">789</div>

轉換前：

轉換後：

5.導航欄小練習

    實現效果：

    程式碼如下：

    <style>
        .nav > a {
            width: 120px;
            height: 50px;
            /*background-color: pink;*/
            /*因為a是行內元素， 沒有大小，我們需要轉換  inline-block */
            display: inline-block;
            background-image: url(images/bg.png);
            text-align: center;  /*讓盒子內的文字居中對齊*/
            /*1. 行內元素  行內塊元素  我們可以看做文字 */
            color: #fff;
            text-decoration: none; /*取消下劃線*/
            /*2. 行高等於盒子的高度，可以讓 單行文字垂直居中*/
            line-height: 50px;
        }
        a:link{
            background-image: url('images/bg.png');
        }
        a:hover{
            background-image: url('images/bgc.png');
        }
        .nav {
            text-align: center;
        }
    </style>

    <div class="nav">
        <a href="#">網站導航</a>
        <a href="#">網站導航</a>
        <a href="#">網站導航</a>
        <a href="#">網站導航</a>
        <a href="#">網站導航</a>
        <a href="#">網站導航</a>
    </div>