本文基本上是作者对 MDN display 这一部分的一个简短的笔记，没有太多的阅读参考价值，建议路过的想要了解这方面内容的读者直接点击链接去往MDN相关页面，那里讲的权威而具体。
1. display的作用
display 主要有两个作用：
- 决定元素自身是 block 元素还是 inline 元素
- 决定子元素的布局 layout
2. 取值
display 的取值可以有一个，也可以有两个。
如果值是一个，则根据具体的值来决定自身的 display type 或是自己内部的布局模式。
如果值是两个，那么一个决定自身，一个决定内部布局模式，一般情况下是第一个值决定自身的 display type，第二个值决定内部的布局模式，但反过来也是允许的。
3. 取值分类
3.1 outside
这类值决定元素自身的 outer display type，决定其在 flow layout 中的角色
- block
- inline
3.2 inside
这类值决定元素内部的布局，即 inner display type
-
flow (处于试验中)
-
flow-root
该元素自身生成一个BFC
-
table
元素内部布局类型为表格
-
flex
元素内部布局类型为 flex
-
gird
元素内部布局类型为 grid
-
ruby (处于试验中)
元素内部布局类型为 ruby formatting model (其实就是用来给日语汉字标读音之类的用途)
3.3 List Item
这个值决定元素本身是否被看做一个 list item
- list-item
<div class="fake-list">I will display as a list item</div>
.fake-list {
display: list-item;
list-style-position: inside;
}
3.4 Internal
一些布局模式如 table 和 ruby 有一个复杂的内部结构，除了父元素需要定义布局模式外，子元素也需要决定它们自身在这个布局模式中是一个怎样的角色。
-
table-row-group
类似
<tbody> -
table-header-group
类似
<thead> -
table-footer-group
类似
<tfoot> -
table-row
类似
<tr> -
table-cell
类似
<td> -
table-column-group
类似
<colgroup> -
table-column
类似
<col> -
table-caption
类似
<caption> -
ruby-base (处于试验中)
类似
<rb> -
ruby-text (处于试验中)
类似
<rt> -
ruby-base-container (处于试验中)
类似
<rbc> -
ruby-text-container (处于试验中)
类似
<rtc>
3.5 Box
这类值决定一个元素自身是否生成一个显示盒子。
-
contents
元素自身不生成一个盒子，而是由它的伪元素或子元素的盒子来代替它自己的盒子。
-
none
直接玩消失！
3.6 Precomposed
这类值是由上述类型的值进行组合生成的。
-
inline-block
等价于 inline flow-root
-
inline-talbe
等价于 inline talbe
-
inline-flex
等价于 inline flex
-
inline-grid
等价于 inline grid
