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

它的語法如下：

當然預設值是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; }

相容性如下：
圖片描述

下面給個運用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基礎篇--你知道的display的值有多少？用了多少？

相關文章