大家都知道display可以轉換元素類型，但是大多人其實對于display的屬性值，比較熟悉的隻是block和inline以及inline-block和none，對于其他屬性值，了解都比較一般，在平時開發過程中也不太用得到其他的屬性值，但是每次用這個屬性的時候，腦海裡都會冒出來，其他的屬性值，設置了會是怎麼樣、有什麼樣的特點，這個奇奇怪怪的想法，所以找了個時間，寫下這篇文章， 跟我有相同可愛想法的夥伴，如果感興趣的，可以駐步瞄一眼喲；
一、css規定，元素類型有兩大類，一類是塊狀元素，一類是行内元素，首先了解一下兩種元素類型的特征：塊狀元素特征：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>）。
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>）。
<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屬性都有的值，能被繼承的屬性，自然可以繼承，不能被繼承的，設置了此屬性值也不能實現繼承；
18、compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經從 CSS2.1 中删除。
19、marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經從 CSS2.1 中删除。
總結：通過以上的測試，可以總結出：
display的屬性值為block，table的标簽都為塊狀元素；
display的屬性值為inline，inline-table，inline-block的标簽為行内級元素；
表格中的标簽對應的那些display的屬性值，其他的标簽也可以設置，但是都不具備表格标簽的功能和特征，所以表格中的标簽對應的display的屬性值，不能泛用，相當于一種特殊的存在；
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
