7.4 内外显示类型的组合
7.4.1 同一元素的组合
自身display-inside(4) + 自身display-outside(2) = 4*2 = 8种组合
一个元素的display-inside可以有4种主要类型（暂不考虑flow-root），它自身的display-outside对于4种类型又分别有2种类型：block、inline，所以共8种有效组合，它们之间并不矛盾。
以display-inside: flex的元素为例，它的display-outside设置成inline与block都会有效。flex容器本身设置inline，表示整个flex元素作为行内元素显示。
示例代码
<body>
<div>
<span>元素1</span>
<div style="display: inline flex;">
<div>
<div>第1列</div>
<div>小步教程</div>
<div>更多元素略</div>
</div>
<div>
<div>第2列</div>
<div>xiaobuteach.com</div>
</div>
</div>
<span>元素3</span>
</div>
<div>第2块</div>
</body>
运行效果
当前元素display-inside是flex，它又像inline元素与其它inline元素一行。
试一试。一个元素的display-inside是其它值时，同时自身display-outside是inline与block的差别。
7.4.2 父子元素的组合
父元素的display-inside可以有4种类型，子元素的display-outside可以有2种，因为display-outside只适用于流式布局设置。也就是说，父元素display-inside是flow时，子元素display-outside设置block或inline有效；父元素display-inside是非flow值时，子元素display-outside只能是block，即使设置inline也无效，会被自动修改成block，对应CSS特性的“计算性”。
父元素display-inside(4) + 子元素dispay-outside(2) = 4+1 = 5种组合
以flex布局为例。
示例代码
<div style="display: block flex;">
<div style="display: inline flow;">第1列 小步教程</div>
<div>第2列 xiaobuteach.com</div>
</div>
开发者查看元素的计算样式，值被自动修改为block。
7.4.3 display-outside被自动修改的底层逻辑
规则：flex子元素display-outside只能是block而不能是inline。该规则的底层逻辑如下。
（1）从控制权的角度看。flex子元素的外部显示类型由父元素控制，自己无法设置。
（2）从盒子属性设置的角度看。inline盒子不能设置宽高等属性，实际需求场景flex子元素本身设计为容器，需要像div一样设置宽高。
（3）从子元素内部布局看。flex子元素内部需要设计为流式布局，而且是一个新的流式布局，只有display-outside: block即块级元素才符合。
table、grid同理，布局对应特定的元素结构，table结构的末级元素是th与td、grid结构的末级元素是grid容器的子元素，末级元素的内部仍然是流式布局，相应元素display-outside也必须是block，如果不是则被自动修改。由此可见，display: block盒子并不一定完全独占一行。
