display属性

display属性指定了元素的显示类型，包含两类基础特征

外部显示类型

指定元素怎样生成盒子模型，怎样参与流式布局的处理

内部显示类型

定义非替换元素如何生成格式化上下文，确定子元素的布局方式

简单理解就是外部显示类型确定该元素本身如何显示，内部显示类型确定作为容器，该元素的子元素如何显示

display的规范

在CSS Display Module Level 3中，对display属性的定义如下：

name: display

value: [<display-outside>||<display-inside>]

|<display-listitem>

|<display-internal>

|<display-box>

|<display-leagcy>

initial: inline

applies to: all elements

inherited: no

先简单介绍如何阅读以上规范

如何理解规范

“<”和“>”之间的词给出了某种值的类型，或者是对另一个属性的引用
一些关键字符串在一起，这意味着所有这些关键字必须以给定顺序出现
如果候选项由一个竖线分隔（X | Y），那么必须出现其中之一，且不能同时出现
双竖线（X || Y）表示出现X或Y，或者二者都必须出现，但是必须按照顺序
双和号(&&)分隔的两个或更多部分，必须全部出现，顺序随意
中括号（[...]）用于分组。两项并列优先级要高于双竖线，而双竖线则高于单竖线
inital 表示初始值
applies to 表示应用该属性的元素
inherited 表示该属性的值是否能被子元素继承

基于以上规则，display可选值类型就确定了，那么每种类型有哪些值，并且没种类型代表什么含义呢？

<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | ruby
<display-listitem> = <display-outside>? && [flow | flow-root]? && list-item
<display-internal> = table-row-group | table-header-group |
                     table-footer-group | table-row | table-cell |
                     table-column-group | table-column | table-caption |
                     ruby-base | ruby-text | ruby-base-container |
                     ruby-text-container
<display-box> = contents | none
<display-leagcy> = inline-block | line-table | line-flex | inline-grid

display-outside 指定了该元素在流式布局中的外部显示类型：
- block表示该元素会生成一个块级盒子
- inline表示该元素会生成一个行内级盒子
- run-in表示会生成一个run-in box，这是一种有特殊行为的行内级盒子
- 如果声明了<display-outside>的值，却忽略了<display-inside>的值，那么该元素的内部显示类型默认为 flow
display-inside 指定了该元素的内部显示类型——用来定义确定内容如何输出的格式化上下文：
- flow 表示使用流式布局，如果<display-outside>为inline或run-in，并且该元素块或行内格式化上下文，就会产生行内盒子，否则产生块容器盒子
- flow-root 表示该元素会产生一个块容器盒子，对内容使用流式布局
- table 指定该元素会产生一个表格包装盒子(table wrapper box)，建立一个块格式化上下文，并且额外产生一个表格盒子(table box)，在其中建立一个表格格式化上下文(table formatting context)
- flex 指定该元素产生一个flex容器盒子，并建立一个flex格式化上下文
- grid 指定该元素产生一个grid容器盒子，并建立一个grid格式化上下文
- ruby 指定该元素产生一个ruby容器盒子，并建立一个ruby格式化上下文
- 如果声明了<diaplay-inside>的值，却忽略了<diaplay-outside>的值，那么该元素的外部显示类型默认为block，除了ruby，其默认值为inline
list-item关键字会导致该元素生成一个::marker的伪元素，可以通过list-style 来修改其样式。如果没有声明内部显示类型，默认为flow；如果没有声明外部显示类型，默认为block
table-* 和 ruby-*关键字所代表的布局模型，有很复杂的内部结构，暂时不做深入了解
display-box 指定该元素是否生成盒子
- contents 指定该元素本身不会生成盒子，但是它的子元素和伪元素依旧正常生成盒子
- none 指定该元素及其后代元素都不会生成盒子
diaplay-leagcy 是css 2使用的单关键字语法
- inline-block 的行为与inline flow-root一致
- inline-table 的行为与inline table 一致
- inline-flex 的行为与 inline flex 一致
- inline-grid 的行为与 inline grid 一致