你的位置:首页 > 网页设计

[网页设计]你知道的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新增属性可能存在描述错误及变更,仅供参考。标绿的为我觉得常用的,标红的为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; }

 

兼容性如下:

  1. Basic Support包含值:none | inline | block | list-item | inline-block
  2. table系包含值:table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group
  3. 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/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。