CSS3 属性——display

最常用的有 block，inline，inline-block，flex，none，除此之外还有很多属性，这里一一介绍。

总览

/* CSS 1 */
display: none
display: inline
display: block
display: list-item

/* CSS 2.1 */
display: inline-block;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: table-caption;

/* CSS 3 */
display: inline-list-item
display: flex
display: box
display: inline-flex
display: grid
display: inline-grid
display: ruby
display: ruby-base
display: ruby-text
display: ruby-base-container
display: ruby-text-container

/* 关键字 */
display: inherit  // 继承
display: initial  // 默认
display: unset  // inherit 和 initial 的组合，如果有继承就继承，没有就默认

介绍

display: list-item

字面意思：列表元素；效果可以看成让一个元素变成<li>并进行渲染，同时可以使用list-style属性进行样式设置

list-item.png

display: table | table-row | table-cell

效果可以看成让元素变成<table>、<tr>、<td>并进行渲染，并且可以使用表格的一些特性进行布局和一些操作

同样的，

• table-row-group —— <tbody>
• table-header-group —— <thead>
• table-footer-group —— <tfoot>
• table-caption —— <caption>
• table-column —— <col>
• table-column-group —— <colgroup>

table.png

display: flex

flex 布局，生成一个弹性盒子，具体介绍我单独写了一篇博客，这是链接。

display: box | flexbox | inline-flexbox

这几种和 display: flex 为类似的属性，是定制 CSS 各个阶段中的不同草案，以最终的 display: flex 为确定通用方案，具体可以参考W3C标准中对弹性盒子的一些介绍，包括历史版本和用法介绍，这是链接。

display: ruby

有些语言会对文字进行注释，如中文的在汉字上面注音，使用 ruby 属性可以方便对注释的格式控制，具体介绍我单独写了一篇博客，这是链接（未完成）

display: grid

grid 布局，