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

兼容性如下:
《CSS基础篇--你知道的display的值有多少?用了多少?》

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;
}

实现导航如图:
《CSS基础篇--你知道的display的值有多少?用了多少?》

导航效果地址:http://www.andthewinnerisnt.com/

相关文章:
《CSS笔记:css3中box-flex属性的使用》
《CSS笔记:css3中的多列布局columns详解》

    原文作者:风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000003745475
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞