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标签

(CSS2)
inline-table:指定对象作为内联元素级的表格。类同于html标签
(CSS2)
table-caption:指定对象作为表格标题。类同于html标签(CSS2)
table-row-group:指定对象作为表格行组。类同于html标签(CSS2)
table-column:指定对象作为表格列。类同于html标签(CSS2)
table-column-group:指定对象作为表格列组显示。类同于html标签(CSS2)
table-header-group:指定对象作为表格标题组。类同于html标签(CSS2)
table-footer-group:指定对象作为表格脚注组。类同于html标签(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; }

兼容性如下:
CSS基础篇--你知道的display的值有多少?用了多少?_第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代码:


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详解》

你可能感兴趣的:(css,display)

(CSS2)
table-cell:指定对象作为表格单元格。类同于html标签
(CSS2)
table-row:指定对象作为表格行。类同于html标签