CSS基礎篇--你知道的display的值有多少？用了多少？

它的語法以下：

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。

取值：

none：隱藏對象。與visibility屬性的hidden值不一樣，其不爲被隱藏的對象保留其物理空間
inline：指定對象爲內聯元素。
block：指定對象爲塊元素。
list-item：指定對象爲列表項目。
inline-block：指定對象爲內聯塊元素。（CSS2）
table：指定對象做爲塊元素級的表格。類同於html標籤<table>（CSS2）
inline-table：指定對象做爲內聯元素級的表格。類同於html標籤<table>（CSS2）
table-caption：指定對象做爲表格標題。類同於html標籤<caption>（CSS2）
table-cell：指定對象做爲表格單元格。類同於html標籤<td>（CSS2）
table-row：指定對象做爲表格行。類同於html標籤<tr>（CSS2）
table-row-group：指定對象做爲表格行組。類同於html標籤<tbody>（CSS2）
table-column：指定對象做爲表格列。類同於html標籤<col>（CSS2）
table-column-group：指定對象做爲表格列組顯示。類同於html標籤<colgroup>（CSS2）
table-header-group：指定對象做爲表格標題組。類同於html標籤<thead>（CSS2）
table-footer-group：指定對象做爲表格腳註組。類同於html標籤<tfoot>（CSS2）
run-in：根據上下文決定對象是內聯對象仍是塊級對象。（CSS3）
box：將對象做爲彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對象做爲彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex：將對象做爲彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

CSS3新增屬性可能存在描述錯誤及變動，僅供參考。

說明：經常使用的display屬性值以下：none，block，inline-block，table，table-cell，table-row，box，flex

注：IE6,7支持inline元素轉換成inline-block，但不支持block元素轉換成inline-block，因此非inline元素在IE6,7下要轉換成inline-block，需先轉換成inline，而後觸發hasLayout，以此來得到和inline-block相似的效果；能夠這樣：

全兼容的inline-block:

div { display: inline-block; *display: inline; *zoom: 1; }

兼容性以下：

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元素設置爲inline-block，其它類型元素均不能夠

下面給個運用table的例子：

html代碼：

<nav role="navigation"> 
    <ul id="mainNav">
        <li><a href="index.html">Why?</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="offline.html">Offline</a></li>
        <li><a href="redemption.html">Redemption</a></li>
        <li><a href="video.html">Videos/clips</a></li>
        <li><a href="3Dquiz.html">Quiz</a></li>
    </ul>
</nav>

css代碼：

nav{
    display:table;
}
nav ul{
    display:table-row;
}
nav ul li{
    display:table-cell;
}
nav ul li:last-child{
    text-align:right;
}
nav ul li:first-child{
    text-align:left;
}

實現導航如圖：

導航效果地址：http://www.andthewinnerisnt.com/

相關文章：
《CSS筆記：css3中box-flex屬性的使用》
《CSS筆記：css3中的多列布局columns詳解》