详解display属性

所有元素都有默认属性，div默认block
根据display属性，我们可以将元素分为块级元素(block)和内联级元素(inline)。它们最大区别是:block元素可以设置宽度，独占一行。inline元素宽度由内容决定，与其他元素并列在一行。
常见的block属性元素有：div, h1-h6, ul, li, ol, dl, dd, dt。
常见的inline属性元素有: span, a, em

属性:

display:none;

将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。
该元素生成块级框。除特殊声明外，所有的块级元素开始于新的一行，延展到其容器的宽度。

display:block

宽高可以自行设置，默认宽度由父容器决定，默认高度有内容决定。自己独占一行。

display:inline

宽度和高度都有内容决定，与其他元素共占一行。
该元素生成一个或多个行内框。就如名字般，行内级元素所占具的空间就是他的标签所定义的大小。可以被视为对块级元素的补充。

display:inline-block

宽度可以自行设置，类似block，但是与其他元素共占一行，类似inline。长用于设置垂直居中。

 display:table-cell

此属性指让标签元素以表格单元格的形式呈现，单元格有一些比较特殊的属性，可以设置元素的垂直居中等。

display: list-item;

元素被渲染为列表项呈现的方式，确切说就像是一个块级元素，但是会生成一个可以被list-style属性进行样式修饰的标记框。只有<li>元素可以具有list-style的默认值。通常将<li>元素重置为默认行为。

display: inherit;

规定应该从父元素继承 display 属性的值。

display:flex

此处请参照阮一峰老师的博文
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

   display:initial;
   这个没找到用法和解释

---

其他

inline-table：

指定对象作为内联元素级的表格。类同于html标签

（CSS2）

table-caption：

指定对象作为表格标题。类同于html标签（CSS2）

table-cell：

指定对象作为表格单元格。类同于html标签（CSS2）

table-row：

指定对象作为表格行。类同于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）