它的语法如下:
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新增属性可能存在描述错误及变更,仅供参考。标绿的为我觉得常用的,标红的为css3新增。
注: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/
作者:风雨后见彩虹
出处:http://www.cnblogs.com/moqiutao/
如果您觉得本文对您的学习有所帮助,请多支持与鼓励。
原标题:你知道的display的值有多少?用了多少?
关键词: