?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
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
默認(rèn)值：inline
適用于：所有元素
繼承性：無(wú)
動(dòng)畫性：否
計(jì)算值：指定值，除浮動(dòng)，絕對(duì)定位和根元素外
媒體：視覺(jué)
取值：
none：隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間
inline：指定對(duì)象為內(nèi)聯(lián)元素。
block：指定對(duì)象為塊元素。
list-item：指定對(duì)象為列表項(xiàng)目。
inline-block：指定對(duì)象為內(nèi)聯(lián)塊元素。（CSS2）
table：指定對(duì)象作為塊元素級(jí)的表格。類同于html標(biāo)簽<table>（CSS2）
inline-table：指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格。類同于html標(biāo)簽<table>（CSS2）
table-caption：指定對(duì)象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2）
table-cell：指定對(duì)象作為表格單元格。類同于html標(biāo)簽<td>（CSS2）
table-row：指定對(duì)象作為表格行。類同于html標(biāo)簽<tr>（CSS2）
table-row-group：指定對(duì)象作為表格行組。類同于html標(biāo)簽<tbody>（CSS2）
table-column：指定對(duì)象作為表格列。類同于html標(biāo)簽<col>（CSS2）
table-column-group：指定對(duì)象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）
table-header-group：指定對(duì)象作為表格標(biāo)題組。類同于html標(biāo)簽<thead>（CSS2）
table-footer-group：指定對(duì)象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2）
run-in：根據(jù)上下文決定對(duì)象是內(nèi)聯(lián)對(duì)象還是塊級(jí)對(duì)象。（CSS3）
box：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒過(guò)渡版本）（CSS3）
inline-flexbox：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒過(guò)渡版本）（CSS3）
flex：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
* CSS3新增屬性可能存在描述錯(cuò)誤及變更，僅供參考，持續(xù)更新
說(shuō)明：設(shè)置或檢索對(duì)象是否及如何顯示。
如果display設(shè)置為none，float及position屬性定義將不生效；
如果position既不是static也不是relative或者float不是none或者元素是根元素，當(dāng)display:inline-table時(shí)，display的計(jì)算值為table；當(dāng)display:inline | inline-block | run-in | table-* 系時(shí)，display的計(jì)算值為block，其它情況為指定值；
IE6,7支持inline元素轉(zhuǎn)換成inline-block，但不支持block元素轉(zhuǎn)換成inline-block，所以非inline元素在IE6,7下要轉(zhuǎn)換成inline-block，需先轉(zhuǎn)換成inline，然后觸發(fā)hasLayout，以此來(lái)獲得和inline-block類似的效果；你可以這樣：
全兼容的inline-block：
div {
display: inline-block;
*display: inline;
*zoom: 1;
}對(duì)應(yīng)的腳本特性為display。
兼容性：
Basic Support包含值：none | inline | block | list-item | inline-block
table系包含值：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group
IE6,7只支持inline元素設(shè)置為inline-block，其它類型元素均不可以
實(shí)例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>display_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<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構(gòu)造的table小例子，IE7及以下瀏覽器不支持本示例</h1>
<div class="table">
<h2 class="table-caption">花名冊(cè)：</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">序號(hào)</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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例