1、定義
語法：display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
作用：設置元素如何顯示
初始值：inline
應用於：所有元素
繼承性：無
注：只有一個元素屬於inline或是inline-block，其身上的vertical-align屬性才會起作用
2、取值
none：隱藏元素並脫離文檔流，與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline：指定對象為內聯元素；不支持設置寬、高樣式；寬度取決於內容；非獨占一行顯示
block：指定對象為塊元素；不設置寬度時，寬度為父元素寬度；獨占一行顯示；支持設置寬、高樣式
inline-block：指定對象為內聯塊元素；寬度取決於內容；非獨占一行顯示；支持設置寬、高樣式
list-item：指定對象為列表項目；不設置寬度時，寬度撐滿一行；支持設置寬、高樣式；獨占一行顯示
table：指定對象作為塊元素級的表格，類同於html標簽<table>
inline-table：指定對象作為內聯元素級的表格，類同於html標簽<table>
table-caption：指定對象作為表格標題，類同於html標簽<caption>
table-cell：指定對象作為表格單元格，類同於html標簽<td>
table-row：指定對象作為表格行，類同於html標簽<tr>
table-row-group：指定對象作為表格行組，類同於html標簽<tbody>
table-column：指定對象作為表格列，類同於html標簽<col>
table-column-group：指定對象作為表格列組顯示，類同於html標簽<colgroup>
table-header-group：指定對象作為表格標題組，類同於html標簽<thead>
table-footer-group：指定對象作為表格腳注組，類同於html標簽<tfoot>
3、示例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>display</title>
<style>
body{font:14px/1.5 georgia,simsun,arial;}
h1{margin:10px 0;font-size:20px;}
ul{margin:0;padding:0;list-style:none;}
.table{display:table;border-collapse:collapse;border:1px solid #ccc;}
.table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}
.table-column-group{display:table-column-group;}
.table-column{display:table-column;width:100px;}
.table-row-group{display:table-row-group;}
.table-row{display:table-row;}
.table-row-group .table-row:hover,.table-footer-group .table- row:hover{background:#f6f6f6;}
.table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}
.table-header-group{display:table-header-group;background:#eee;font- weight:bold;}
.table-footer-group{display:table-footer-group;}
</style>
</head>
<body>
<h1>display構造的table小例子，IE7及以下瀏覽器不支持本示例</h1>
<div class="table">
<h2 class="table-caption">花名冊：</h2>
<div class="table-column-group">
<div class="table-column"></div>
<div class="table-column"></div>
<div class="table-column"></div>
</div>
<div class="table-header-group">
<ul class="table-row">
<li class="table-cell">序號</li>
<li class="table-cell">姓名</li>
<li class="table-cell">年齡</li>
</ul>
</div>
<div class="table-footer-group">
<ul class="table-row">
<li class="table-cell">footer</li>
<li class="table-cell">footer</li>
<li class="table-cell">footer</li>
</ul>
</div>
<div class="table-row-group">
<ul class="table-row">
<li class="table-cell">1</li>
<li class="table-cell">John</li>
<li class="table-cell">19</li>
</ul>
<ul class="table-row">
<li class="table-cell">2</li>
<li class="table-cell">Mark</li>
<li class="table-cell">21</li>
</ul>
<ul class="table-row">
<li class="table-cell">3</li>
<li class="table-cell">Kate</li>
<li class="table-cell">26</li>
</ul>
</div>
</div>
</body>
</html>