7.5 display模型示意图

display模型的逐级嵌套结构。页面的所有元素形成树状结构，根元素html的display-inside:flow决定子元素body的内部显示类型，body自身的display-outside决定外部显示类型，共同作用决定body的显示；依此类推，每级后代元素设置display-inside与display-outside，实现布局的逐级嵌套。所以称display模型是众多模型的顶级模型，display模型逐级嵌套结构是页面布局设计的关键。

7.5.1 display模型两层结构

display模型两层结构示意图

示例代码

    <div id="outer" style="display: block flow;">
        <div id="inner1" style="display: block flow;">inner1 小步教程</div>
        <div id="inner2" style="display: block flow;">inner2 xiaobuteach.com</div>
    </div>

以inner1元素为研究对象、作为当前元素，父元素指out。当前元素的显示取决于两个要素：父元素的display-inside，当前元素的display-outside。当前元素inner1的display: block flow表示它在父元素outer的外部显示类型是block，inner1内部子元素（上图并未画出）显示类型是flow；outer的display: block flow表示它在爷元素（上图并未画出）的外部显示类型是block，outer内部显示类型是flow。通过元素的嵌套结构以及display属性值的内外两个含义，从而实现display布局的嵌套。

7.5.2 display模型三层结构

下面以三层结构为例，完整表示当前元素的display-outside与display-inside的作用。

“父元素(outer)”与“子元素(child1)”是相对当前元素(inner1)称呼，它们之间是爷孙关系。

对应示例代码

     <div id="outer" style="display: block flow;">
        <div id="inner1" style="display: block flow;">
            <div class="child1">
                child1 小步教程
            </div>
            <div class="child2">
                child2 小步教程
            </div>
        </div>
        <div id="inner2" style="display: block flow;">inner2 xiaobuteach.com</div>
    </div>

子元素child1的显示由当前元素inner1的display-inside与自己child1的display-outside共同决定。也就是说，当前元素inner1的display-outside决定自己的显示，当前元素inner1的display-inside决定子元素child1与child2的显示。

实际页面元素结构的嵌套层次经常达到10级，上述结构对应也会达到10级。