display

display的所有属性你真的都记住了吗？

这种关键字指定了元素的外部显示类型，实际上就是其在流式布局中的角色（即在流式布局中的表现）

block 该元素生成一个块元素框，在正常流动中时在元素之前和之后都产生换行符。
inline 元素会生成一个或多个内联元素框，这些框不会在自身之前或之后产生换行符。在正常流动中，如果有空间，则下一个元素将在同一行上
run-in 元素生成一个插入框。如果定义为display: run-in box 的元素的相邻同级是一个block box，则该run-inbox成为其后的block box的第一个内联框。

磨合元素的作用类似于内联或块，具体取决于周围的元素。也就是说：如果磨合盒包含一个阻止框，则与阻止相同。如果插装盒位于磨合盒之后，则插装盒将成为插装盒的第一个内联盒。如果紧接内联框，则插入框将成为阻止框。

这些关键字指定了元素的内部显示类型，它们定义了该元素内部内容的布局方式（假定该元素为非替换元素 non-replaced element）。

flow 元素使用流布局（块和内联布局）布局其内容。如果其外部显示类型为inline或run-in，并且它参与了块或内联格式设置上下文，则它将生成一个内联框。否则，它将生成一个块容器框。

根据其他属性的值（如position，float或overflow），以及是否它本身参与块或内联格式化上下文中，它或者建立一个新的块格式化上下文（BFC），用于其内容物或它的内容集成到它的父格式化上下文。

将这个元素的外部显示类型变为 block 盒，并将内部显示类型变为多个 list-item inline 盒。

有些布局模型（如 table 和 ruby）有着复杂的内部结构，因此它们的子元素可能扮演着不同的角色。这一类关键字就是用来定义这些“内部”显示类型，并且只有在这些特定的布局模型中才有意义。

这些值决定元素是否使用盒模型。

contents 这些元素本身不会产生特定的框。它们被伪框和子框替换。
none 关闭元素的显示，使其对布局没有影响（呈现文档时就好像该元素不存在一样）。所有后代元素也都关闭了显示。要使一个元素占用它通常会占用的空间，但实际上不渲染任何东西，请改用该visibility属性。

CSS 2 对于 display 属性使用单关键字语法，对于相同布局模式的 block 级和 inline 级变体需要使用单独的关键字。

inline-block 该元素生成一个块元素框，该框将随周围的内容一起流动，就好像它是单个内联框一样（与被替换的元素非常相似）。等同于inline flow-root。
inline-table 该inline-table值在HTML中没有直接映射。它的行为就像一个HTML "table"元素，但它是一个内联框，而不是一个块级框。在表格框内是一个块级上下文。等同于inline table。
inline-flex 元素的行为类似于内联元素，并根据flexbox模型布置其内容。等同于inline flex。
inline-grid 元素的行为类似于内联元素，并根据网格模型布置其内容。等同于inline grid。

css 笔记 之 display 篇