大家都知道display可以轉換元素型別，但是大多人其實對於display的屬性值，比較熟悉的只是block和inline以及inline-block和none，對於其他屬性值，瞭解都比較一般，在平時開發過程中也不太用得到其他的屬性值，但是每次用這個屬性的時候，腦海裡都會冒出來，其他的屬性值，設定了會是怎麼樣、有什麼樣的特點，這個奇奇怪怪的想法，所以找了個時間，寫下這篇文章， 跟我有相同可愛想法的夥伴，如果感興趣的，可以駐步瞄一眼喲；

一、css規定，元素型別有兩大類，一類是塊狀元素，一類是行內元素，首先了解一下兩種元素型別的特徵：塊狀元素特徵：塊狀元素可以正確解釋盒模型的屬性width,height,padding,margin,border塊狀元素前後帶有換行符，所以自佔一行，在垂直方向一個接一個的放置；塊狀元素一般作為容器、盒子使用；塊狀元素預設情況下，寬度與父元素同寬，高度根據內容而定，沒有內容，高度為0；行內(內聯)元素特徵：行內元素不能正確解釋盒模型的屬性，width、height執行無效，padding、border、margin解釋時，左右解釋沒有問題，上下解釋不正確；行內元素在一行內從左往右依次排列；行內元素預設情況下，寬度和高度都根據內容而定；二、元素型別的轉換

display屬性：規定元素應該生成的框的型別（改變元素的型別，使用display屬性）。

ps：以下就是每個屬性的詳解了，啦啦啦啦啦啦啦；

屬性值詳解：

1、none：此元素不會被顯示；

（1） none此單詞的意思是沒有一個、毫無的意思；所以當display的屬性值設定為none的時候，表示的是沒有框型別，沒有框型別的元素，是無法在瀏覽器中顯示的，就實現隱藏元素的作用了；

示例如下：

html結構：

    <div></div>    <p>我是p，測試div消失後，會不會佔據瀏覽器空間</p>

css樣式：

     <style>        div{            width:100px;            height:100px;            background:violet;            /*設定div的屬性值為none，觀察div是否會隱藏不可見*/            display: none;        }        p{            background:yellowgreen        }    </style>

以上程式碼效果可以看出，div設定none之後，實現了完全消失並且不佔據瀏覽器的空間效果；

（2）有很多標籤，display的屬性值預設是none，比如 head meta style link等等；

（3）專案應用中，做二級導航效果或者滑鼠懸停效果動態時，會經常用到這個屬性值，下次我們寫一個好玩的二級效果再來展示這個屬性值的作用；

2、block：此元素將顯示為塊級元素，此元素前後會帶有換行符。

示例如下：

 html結構：     <em>我原本是行內元素</em> css樣式：       <style>            em{                width:100px;                height:100px;                background:tomato;               /*em本來是行內元素元素,現在使用display屬性轉換為塊狀元素 */                display: block;            }        </style>

3、inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。

示例如下：

  html結構：       <div>我原本是塊狀元素</div>    <span>用來測試的行內元素span</span>       css樣式：      <style>        div{            width:80px;            height:80px;            background:coral;            /*div標籤本來是塊狀元素，現在使用display屬性轉換為行內元素；*/            display: inline;        }        span{            background:cornflowerblue        }    </style>

4、inline-block 行內塊元素（CSS2.1 新增的值）

說明：行內塊元素既具備行內元素的特性也具備塊狀元素的特性，具備行內元素前後沒有換行符可以在一行內並列顯示的特性，具備塊狀元素可以正確解釋盒模型屬性的特性。

示例如下：

div塊狀元素，span行內元素，使用此屬性值轉換為行內塊元素；

 html結構：         <div>我原本是塊狀元素</div>      <span>我原本是行內元素</span>       css樣式：         div,span{           /*div塊狀元素，span行內元素，使用此屬性值轉換為行內塊元素；*/              display: inline-block;        }        div{            width:100px;            height:100px;            background:tomato;        }        span{            width:100px;            height:100px;            background:turquoise;        }

5、list-item 此元素會作為列表顯示。

(1) 此屬性值表示將元素顯示為列表項標籤，li標籤預設的display的屬性值是list-item，display的屬性值為list-item的標籤也屬於塊狀元素；

示例如下：

(2) li標籤作為列表項標籤，前面會有列表項標記，下面給div標籤設定為list-item，div也會有列表項標記

 html結構：        <ul>            <div>div0</div>            <li>li1</li>            <li>li2</li>            <li>li3</li>        </ul>     css樣式：             ul{            background:tomato        }        ul li{            border:1px solid turquoise        }        div{            /*給div標籤設定為list-item*/            display: list-item;        }

6、run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。

(1) 目前很少有瀏覽器支援run-in這個屬性值，並且在開發過程中用不到這個屬性值，不予過多的研究；

7、table 此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。

（1）table標籤預設的元素型別是table，顯示為塊級表格，可以設定大小並且單獨佔據一行；（2）當table標籤的元素型別是table時，並且設定寬度和高度之後，後代td標籤的寬度和高度，預設是由table根據內容的多少去分配的；

(3) table屬於塊狀元素，但是對比別的塊狀元素，有自己的特點， table會單獨佔據一行，但是在沒有設定width的情況下，不會與父元素同寬，而是根據內容而定；

html結構：      <table>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>        </table>        <span>我是行內元素span</span>         css樣式：         table{            border:2px solid red;        }        table td{            border:1px solid chocolate;            background:darkcyan        }        span{            background:cornflowerblue        }

（3）其他標籤設定display的屬性值為table，也不會具有表格的特性；

html結構：       <div>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>       </div> css樣式：             div{            height:300px;            width:300px;            border:2px solid red;            /*將div設定為表格型別*/            display: table;        }        div td{            border:1px solid chocolate;            background:darkcyan        }        span{            background:cornflowerblue        }

8、inline-table 此元素會作為內聯表格來顯示（類似 <table>），表格前後沒有換行符。

（1）將table顯示為行內表格，具有行內塊元素的特徵，可以和別的行內元素從左往右顯示也可以設定寬度和高度；

html結構：

       <table>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>       </table>       <span>我是行內元素span</span>

css樣式：

        table{            border:2px solid red;            /*將table設定為inline-table*/            display: inline-block;        }        table td{            background:darkcyan;                    }      span{             background:cornflowerblue      }

（2）將table標籤設定為inline-table之後，td標籤的寬度就不能是table根據內容去分配了，需要單獨給td設定width和height屬性實現，不然td的大小就是內容的大小

HTML結構：

       <table>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>       </table>       <span>我是行內元素span</span>

css樣式：

 table{            border:2px solid red;            /*將table設定為inline-table*/            display: inline-block;            width:300px;            height:300px;        }       table td{            background:darkcyan;                    }      span{             background:cornflowerblue      }

9、table-caption 此元素會作為一個表格標題顯示（類似 <caption>）

（1）caption標籤display的屬性值是table-caption，能設定寬度高度盒模型屬性等，屬於塊狀元素；

html結構：

     <table>        <caption>我是表格的標題標籤</caption>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>              <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>       </table>

css樣式：

 table{            border:2px solid red;           width:300px;           height:300px;        }        table td{            background:darkcyan;        }        table caption{           width:400px;           height:50px;           background:cyan;           margin:10px 0;           padding:10px;           line-height:50px;        }

（2）其他標籤也可以設定此屬性值，但是不具備表格標題的作用

10、table-header-group 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。

thead標籤display的屬性值是table-header-group；thead標籤的大小根據table自動分配，或者根據td而定，本身不能設定大小或者邊距其他標籤可以設定此屬性值，但是不具備表頭標籤的作用

html結構：

       <table>            <thead>                <tr>                    <td>1</td>                    <td>2</td>                    <td>3</td>                </tr>            </thead>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>       </table>

css樣式：

 table{            border:2px solid red;        }        table td{            background:darkcyan;            width:100px;            height:100px;        }      table thead{          /*以下屬性設定無效*/          height:60px;          width:400px;          margin:100px;      }

11、table-row-group 此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。

tbody標籤display的屬性值是table-row -group；tbody標籤的大小根據table自動分配，或者根據td而定，本身不能設定大小或者邊距其他標籤可以設定此屬性值，但是不具表格主體標籤的作用

       <table>           <thead>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>           </thead>          <tbody>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>            <tr>                <td>1</td>                <td>2</td>                <td>3</td>            </tr>          </tbody>       </table>

css樣式：

        table{            border:2px solid red;            width:300px;            height:300px;         }        table td{            background:darkcyan;        }      table tbody{          /*以下屬性設定無效*/          height:60px;          width:400px;          margin:100px;      }

12、table-footer-group 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。

（1）tfoot標籤display的屬性值是table-footer-group；

（2）tfoot標籤的大小根據table自動分配，或者根據td而定，本身不能設定大小或者其他邊距

（3）其他標籤可以設定此屬性值，但是不具表格表尾標籤的作用

HTML結構：

    <table>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tfoot>           <tr>               <td>1</td>               <td>2</td>               <td>3</td>            </tr>        </tfoot>      </table>

css樣式：

        table{            border:2px solid red;            width:300px;            height:300px;        }        table td{            background:darkcyan;        }      /*以下屬性設定無效*/      table tfoot{          height:60px;          width:400px;          margin:100px;      }

13、table-row 此元素會作為一個表格行顯示（類似 <tr>）。

（1） tr標籤display的屬性值是table-row

（2） tr標籤設定height有效，width 邊距設定無效，具體的大小根據table和td而定；

（3） 其他標籤可以設定此屬性值，但是不具表格行標籤的作用

HTML結構：

    <table>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>      </table>

css樣式：

        table{            border:2px solid red;        }        table td{            background:darkcyan;        }       table tr{         border:1px solid chartreuse;         margin:20px;         height:100px;         width:300px;         margin:10px;       }

14、table-cell 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）

（1）td , th標籤display的屬性值是table-cell

（2）設定寬度、高度、邊框、內邊距有效，外邊距無效，單元格之間的間距，使用border-spacing實現

HTML結構：

     <table>       <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>     </table>

css樣式：

    <style>        table{            border:2px solid red;            border-spacing: 10px;        }        table td{            background:darkcyan;            width:100px;            height:100px;        }    </style>

（3）其他標籤可以設定此屬性值，但是不具單元格標籤的作用

html結構：

<table>        <tr>            <span>1</span>            <span>2</span>            <span>3</span>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>   </table>

css樣式：

        table{            border:2px solid red;            border-spacing: 10px;        }        table td{            background:darkcyan;            width:100px;            height:100px;        }       span{           display: table-cell;           width:100px;           height:100px;           background:darkcyan;       }

15、table-column-group 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。

（1）colgroup 標籤 display的屬性值是table-column-group

（2）此標籤的特點是對列進行分組的，給分組的列設定樣式；

HTML結構：

<table>      <colgroup span="1"></colgroup>      <colgroup span="2"></colgroup>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>              <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>   </table>

css樣式：

    table{            border:2px solid red;            border-spacing: 10px;        }        table td{            background:darkcyan;        }       table colgroup:nth-child(1){            width:100px;            height:100px;            background:pink        }        table colgroup:nth-child(2){            width:50px;            height:50px;            background:green        }

16、table-column 此元素會作為一個單元格列顯示（類似 <col>）

(1）col 標籤 display的屬性值是table-column

(2）此標籤的特點是對單元格列設定效果；

HTML結構：

<table>       <col span="1">       <col span="2">        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>              <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>   </table>

css樣式：

 <style>        table{            border:2px solid red;            border-spacing: 10px;        }        table td{            width:100px;            height:100px;        }        table col:nth-child(1){            background:pink        }        table col:nth-child(2){            background:green        }    </style>

17、inherit 規定應該從父元素繼承 display 屬性的值。

說明：此屬性值是所有css屬性都有的值，能被繼承的屬性，自然可以繼承，不能被繼承的，設定了此屬性值也不能實現繼承；

總結：

透過以上的測試，可以總結出：

display的屬性值為block，table的標籤都為塊狀元素；

display的屬性值為inline，inline-table，inline-block的標籤為行內級元素；

表格中的標籤對應的那些display的屬性值，其他的標籤也可以設定，但是都不具備表格標籤的功能和特徵，所以表格中的標籤對應的display的屬性值，不能泛用，相當於一種特殊的存在；