display
display属性指定了元素的显示类型，它包含两类基础特征,用于指定元素怎样生成盒模型
外部显示类型：定义了元素怎样参与流式布局的处理
内部显示类型：定义了元素内子元素的布局方式
display 属性使用关键字取值来指定，关键字取值被分为六类
display-outside
display:block;
display:inline;
display:run-in;
这些关键字指定了元素的外部显示类型，实际上就是其在流式布局中的角色
display-inside
display:flow;
display:flow-root;
display:table;
display:flex;
display:grid;
display:ruby;
这些关键字指定了元素的内部显示类型，它们定义了元素内部内容的格式化上下文的类型
display-listitem
display:list-item;
display:list-item block;
display:list-item inline;
display:list-item flow;
display:list-item flow-root;
display:list-item block flow;
display:list-item block flow-root;
display:flow list-item block;
将这个元素的外部显示类型变为block盒,并将内部显示类型变为多个list-item inline 盒
display-internal
display:table-row-group;
display:table-header-group;
display:table-footer-group;
display:table-row;
display:table-cell;
display:table-column-group;
display:table-column;
display:table-caption;
display:ruby-base;
display:ruby-text;
display:ruby-base-container;
display:ruby-text-container;
像table和ruby这样的布局模型有复杂的内部结构,因此它们的孩子和后面的元素可能具有多个角色
这一类关键字就是用来定义这些“内部”显示类型,并且只有在这些特定的布局模型中才有意义
display-box
display:contents;
display:none;
这些值定义元素是否完全生成显示盒
display-legacy
display:inline-block;
display:inline-table;
display:inline-flex;
display:inline-grid;
CSS2对于display属性使用单关键字语法
对于相同布局模式的block级和inline级变体需要使用单独的关键字
详细资料：CSS display属性
