display

  • 版本:CSS2/3
  • 媒体:视觉

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

适用于:所有元素

继承性:无

动画性:否

计算值:指定值,除浮动,绝对定位和根元素外

display取值:

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)

display说明:

设置或检索对象是否及如何显示。
  • 如果display设置为none,floatposition属性定义将不生效;
  • 如果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类似的效果;你可以这样:

    全兼容的inline-block:

    div{display:inline-block;*display:inline;*zoom:1;}
  • 对应的脚本特性为display

display兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-7.0 #1 #2 1.0-25.0 #2 1.0 1.0 7.0
版本 8.0-11.0
  1. 不支持:table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 属性值。
  2. 不支持:run-in 属性值。

兼容性(老版本弹性盒: box | inline-box):

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-11.0 4.0-25 -moz- 5.1.7 -webkit- 4.0-31.0 -webkit- 9.5-14.0
版本 15.0-18.0 -webkit-

兼容性(过渡版本弹性盒: flexbox | inline-flexbox):

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-9.0 4.0-25.0 5.1.7 4.0-31.0 9.5-18.0
版本 10.0 -ms-

兼容性(最新版本弹性盒: flex | inline-flex):

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-10.0 4.0-19.0 5.1.7 4.0-20.0 9.5-12.0
版本 21.0-28.0 -webkit-
版本 11.0 20.0 29.0 12.1

display示例:

CSS常见布局解决方案

说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案...6月3日

纯CSS实现瀑布流布局

所以当时出现过很多实现瀑布流布局的插件。比如Masonry、Isotope等都是非常有名的插件。但使用纯CSS来实现,当时还是非常困难的...4月14日

这可能是史上最全的CSS自适应布局总结

大体上,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位三种定位机制,CSS3中的transform、弹性盒子模块、试验中的grid模块...3月3日

Web布局新系统:CSS Grid,Flexbox和Box Alignment

使用CSS来完成Web布局开始就并没有真正的完成复杂的Web布局。虽然我们使用很多技术手段能实现Web的固定布局,但是这些方法在响应式设计中又出现很多局限性与不足...2016年12月19日

CSS Grid布局未来的特性

一篇有关于CSSGrid的新规范,当时只得到IE的支持。我当时没有意识到CSSGrid布局会成为一个主题。从此之后,我为此付出了四年的时间来研究、测试Grid布局...2016年12月20日

Chrome 57正式版发布:支持CSS Grid布局

macOS和Windows操作系统。在最新稳定版本中,带来了诸多Beta通道测试的新功能和改善,其中最值得关注的是CSSGrid布局,改进版本的...3月12日

CSS高效开发实战》的书。最近无意中从以前的一堆onenote笔记中翻到一点读那本书的时候的笔记。书写的并不好建议不要看,但是这部分知识讲的比较详细,就把它们挂到博客来咯。1...2016年12月29日

原生 CSS 网格布局学习笔记

CSS网格,可以说是在CSS网格方面有一定的发言权。在这篇文章中...2016年12月8日

css Table布局-display:table

当他们使用display:table用来表仪式的布局(或圣杯布局)的时候。回想起来,头脑麻木而且倔强的我花了大把时间,为此写了一堆CSShack,是多么的可笑...2016年10月9日

前端开发应该怎么学(含CSS布局练习源码)

从布局开始,已经学会了基本的布局方式,以及知道了平时看到的一些交互式页面,其实是通过CSS的技术做出来的...2016年12月4日

图文列表 纯css布局

不知你们是如何使用。接下来说说我的做法!!顶部的排序,就弄个色块吧。默认|价格|销量|人气这里是列表CSS:.container{width:1200px...2016年10月31日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册