• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> css >> CSS3 display知识详解

CSS3 display知识详解

• 作者：创新互联 文章来源： 点击数： 更新时间：2016-02-18

• 默认值：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，float及position属性定义将不生效；
  如果position既不是static也不是relative或者float不是none或者元素是根元素，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；
  IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果

  
  
• 使用css布局网站需要了解的几个重点知识 :上一篇
  CSS“隐藏”元素的几种方法的对比 :下一篇