7.1 display属性的两层含义
7.1.1 单值写法的双值含义
问题。display属性表示什么含义？示例代码如下。
<body>
<div style="display: inline;">div1 小步教程</div>
<div style="display: inline;">div2 xiaobuteach.com</div>
<div style="display: block;">div3 小步教程</div>
<div style="display: block;">div4 xiaobuteach.com</div>
<div style="display: flex;"> <!-- div5 -->
<div style="width: 100px;">
<div>第1列</div>
<div>小步教程</div>
</div>
<div>
<div>第2列</div>
<div>xiaobuteach.com</div>
</div>
</div>
</body>
运行效果
div1与div2的display: inline表示自己属于不换行（行内），div3与div4的display: block表示自身独占一行，flex容器div5的display: flex表示自己的子元素按列显示。
问题。display究竟是设置“自己”还是“自己的子元素”？display究竟是表示当前元素的显示类型还是子元素的显示类型？display同时包含两层含义，既表示当前元素在父元素的显示类型，同时也表示子元素的显示类型。display表面只设置一个值，但相当于两个值的含义。
7.1.2 双值写法
display属性包含单值与双值两种写法，上述代码的双值等价写法如下。
<body>
<div style="display: inline flow;">div1 小步教程</div>
<div style="display: inline flow;">div2 xiaobuteach.com</div>
<div style="display: block flow;">div3 小步教程</div>
<div style="display: block flow;">div4 xiaobuteach.com</div>
<div style="display: block flex;"> <!-- div5 -->
<div style="width: 100px;"> <!-- div5-1 -->
<div>第1列</div>
<div>小步教程</div>
</div>
<div> <!-- div5-2 -->
<div>第2列</div>
<div>xiaobuteach.com</div>
</div>
</div>
</body>
display: inline与display: block省略了第2个值flow，display: flex则是省略了第1个值block，所以造成开始的理解困惑。
display双值语法
display: <display-outside> <display-inside> ;
display-outside表示当前元素作为子元素，它在父元素的显示类型，称为外部显示类型。
display-inside表示当前元素作为父元素，它内部子元素的布局类型，称为内部显示类型。
上述示例的div5
<div style="display: block flex;"> <!-- div5 -->
block对应<display-outside>，flow对应<display-inside>。block表示div5在父元素body内的显示类型是block独占一行，flex表示内部的两个子元素div5-1、div5-2作为两列显示。
注意事项1。不存在真实属性display-outside与display-inside，不能为元素设置这两个属性。可理解为display-outside与display-inside是内部特性。
注意事项2。实际项目使用display单值写法，讲解双值写法为了完全理解display模型。
注意事项3。display-outside可选值与display-inside可选值不能混用。下列属于错误用法。
display: flex block;
