它的语法如下:
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:; }
兼容性如下:
- 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/
相关文章: