7.7 盒子类别术语

7.7.1 为什么使用术语

正如描述盒子模型，如果没有“盒子”这一术语，表述相关知识点非常困难；同理，表述相关模型的知识点时，需要盒子类别术语。

1、示例

表述目标：说明部分盒子在同一行内、不单独占据一行的特点。有3种表述方式。

（1）标签表述

示例代码

<div>
   <span>小步教程</div>
   <span>xiaobuteach.com</div>
</div>

使用标签表述：“div内部包含两个span，它们在同一行显示”。该表述的优点：简单直观，初学者易于理解。span标签是典型的行内标签，其它标签也具备类似特性，例如：a、input。这些标签的相应核心属性是display-outside: inline，display单值包括：inline、inline-block、inline-flex等，所以使用标签描述不够完整。div标签是典型的块容器标签，其它标签也具备类似特性，例如li、flex子元素等。同时，元素CSS属性可能重新被设置，所以使用标签描述并不严谨。

（2）CSS属性表述

使用CSS属性表述：“display-inside: flow或flow-root（display单值包括block、inline-block，等）的盒子内部包含两个display-outside: inline（display单值包括：inline、inline-block、inline-flex等）的盒子，它们在同一行显示”。CSS属性表述的优点：通用性更强，具体、说明了本质；缺点：啰嗦，并且难以把具体属性一一列举完全，上述表达出现两处“等”。可以想象，一段知识点表述出现多次这种表达，基本无法阅读。

（3）术语表达

使用CSS属性表述：“块容器盒子内部包含两个行内级盒子，它们在同一行显示”。术语是对前面两种表述的抽象，优点：简洁、严谨、完整。要求：需要理解术语本质的CSS属性，理解标签默认对应相应术语。

2、术语的用处

学习它们帮助建立清晰的设计概念与设计方法。MDN、w3c及本教程在描述CSS模型与规范规则时，关键部分会使用这些术语，掌握它们有助于完全理解模型与规范规则，非常有用。学习盒子类别术语可能非常枯燥，这些术语非常相似，字面差别细微，阅读时需耐心与细心。

3、盒子与元素

因为盒子与元素的对应关系，相应术语把盒子换成元素是相同意思，例如“块级盒子”也表述为“块级元素”，“行内级盒子”也表述为“行内级元素”。本教程与w3c一致尽量表述为盒子，以加强页面渲染过程的理解。

7.7.2 概述

1、术语

块block相关术语：块盒block box、块级盒子block-level box、块容器block container box。

块盒类别示意图

行内inline相关术语：行内盒子inline box、行内级盒子inline-level box。

行盒类别示意图

一个盒子可能属于上述5个类别的多个类别。

2、类别基本依据

表示当前盒子的外部显示类型display-outside，用“级level”；表示当前盒子的内部显示类型display-inside，用“容器container”。

示例代码

    <div>
        <div>小步教程</div>
        <div>xiaobuteach.com</div>
    </div>

标签表述：外部div包含两个内部div，对应术语表述：“块容器盒子包含两个块级盒子”。

3、整体说明

（1）块盒指流式布局中display:block的盒子，行内盒子指流式布局中display: inline的盒子。

（2）流式布局中，有些盒子与块盒的外部显示类型display-outside: block相同，独占一行；但是内部不同，还可以是其它display-inside的盒子。这些盒子称为块级盒子。

（3）流式布局内，有些盒子与行内盒子的外部显示类型display-outside: inline，在一行内；但是内部不同，还可以是其它display-inside的盒子。这些盒子称为行内级盒子。

（4）一个盒子内部是流式布局，称为块容器盒子，简称块容器，可理解成流式布局容器。

7.7.3 块盒与行内盒子

流式布局中的盒子，根据当前元素的display双值定义“块盒”与“行内盒子”两个术语。

术语1：块盒block box。流式布局中，display: block的盒子称为块盒，元素称为块元素。相应标签：body、div、li、h1~6、p。

术语2：行内盒子inline box。流式布局中，display: inline的盒子称为行内盒子，元素称为行内元素。相应标签：span、a。

图示所有桔色盒子属于行内盒子，所有绿色盒子属于块盒。

7.7.4 块级盒子与行内级盒子

盒子级别示意图

块级盒子与行内级盒子分别对块盒与行内盒子进行延伸，只需display-outside为相应值。

术语3：块级盒子block-level box。流式布局内，能像块盒一样独占一行的盒子称为块级盒子，对应元素称为块级元素。本质是display-outside : block。对应display单值包括：block、flow-root、table、flex、grid，以及块级可替换元素。相应标签除块盒标签外，还包括table。

术语4：行内级盒子inline-level box。流式布局内，能像行内盒子一样与其它行内级盒子在一行的盒子称为行内级盒子inline-level box，即行内级盒子，也称行级盒子。对应元素称为行内级元素、行级元素。本质是display-outside : inline。对应display单值包括：inline、inline-block、inline-table、inline-flex、inline-grid、行内可替换元素。

四种盒子的关系。块级盒子包括块盒，行内级盒子包括行内盒子，块级盒子与行内级盒子互斥不存在交集。所以，一个盒子属于块盒，一定也属于块级盒子，反之不成立，例如display: flex的盒子属于块级盒子，但不属于块盒；一个盒子属于行内盒子，一定也属于行内级盒子，反之不成立，例如display: inline-block的盒子属于行内级盒子，但不属于行内盒子。

7.7.5 容器

容器从内部显示类型的角度看待盒子。容器示意图与盒子级别示意图的页面内容相同，从不同角度看待。

容器示意图

容器container。一个元素包含子元素，通过display-inside设置子元素的排列方式，该元素称为容器。根据display-inside值分为4类。

（1）块容器block container。对应display: flow或flow-root。块容器即流式布局容器。块容器的内部可以包括块级元素与行内级元素。

（2）table容器。对应display-inside: table。table结构本身的末级元素是td或th，中间结构还存在thead或tbody、tr。td与th内部是流式布局，它们是块容器。

（3）flex容器。对应display-inside: flex。flex结构本身的末级元素是flex容器的子元素，也称flex项flex item，也称flex子元素。flex子元素内部是流式布局，它们是块容器。

（4）grid容器。对应display-inside: table。grid布局结构的末级元素是grid容器的子元素，也称grid项grid item，也称grid子元素。grid子元素内部是流式布局，它们是块容器。

7.7.6 块容器

块容器是对块盒进行延伸，研究它的内部，表示“哪些元素内部是流式布局”，内部可以嵌套块级盒子与行内级盒子。这个概念在页面分析设计页面时意义重大。

术语5：块容器block container。能像块盒一样内部能够包括块级元素与行内级元素，称为块容器。本质是display-inside: flow或flow-root。对应display单值包括：block、inline-block，以及table末级元素td/th、flex子元素、grid子元素。

块容器的内部组成。块容器的内部要么全部是块级盒子，要么全部是行类级盒子。

示例1：块容器的内部全部是块级盒子。

    <div class="div1">
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </div>

示例2：块容器的内容全部是行内级盒子。

    <div class="div1">
        <span class="span1">span1</span>
        <span class="span2">span2</span>
    </div>

示例3：是否可能块容器内部既有块级盒子又有行内级盒子？

    <div class="div1">
        <div class="div2">div2</div>
        <span class="span1">span1</span>
        <span class="span2">span2</span>
    </div>

div2独占一行，span1与span2共同独占一行，浏览器自动为它们生成匿名块盒，示意代码如下。

    <div class="div1">
        <div class="div2">div2</div>
        <匿名div>
            <span class="span1">span1</span>
            <span class="span2">span2</span>
        </匿名div>
    </div>

最终结构中，当一个块容器内部含有块级盒子时，则直接包含的全部是块级盒子；当一个块容器内包含行内级盒子时，则内部全部是行内级盒子。

各类型盒子的关系。一个盒子属于块盒，一定也属于块容器，反之不成立，例如td与display:inline-block盒子，它们不属于块盒，但属于块容器；块容器与块级盒子的交集即块盒；块容器与行内级盒子存在交集，例如inline-block盒子既是块容器又是行内级盒子；块容器与行内盒子互斥不存在交集。

术语6：块block。块可能表示下列3种的其中一种：块盒block box、块级盒子block-level box、块容器block container box，根据具体场景能确定无误时使用。很少使用这一不严谨术语。

7.7.7 常用display值的盒子类别

常用display值根据内外特性整理盒子类别如下。

一定试一试。不看答案直接分析出每个display单值的盒子类别。完成此题说明真正理解了display模型。

初学者如果学完本节后仍不太明确理解，碰到块级、块容器，先当div理解；碰到行内、行内级，先当span理解。

7.7.8 包含块简介

注：包含块containing block，此术语容易造成表达歧义与理解混淆，例如表述“块容器内部包含块级元素”并没有使用此术语，为避开此术语，这种情况改为“包括块级元素”。

包含块不是指盒子，而是指特定盒子的特定区域。术语目的是相关定位与尺寸的需要。严格来说，该术语不属于盒子类别，但与盒子类别相关。

一个盒子包括四个区域，有时需要明确相对于哪个区域，有的场景相对于内容区，有的场景相对于padding区，等。相对区域的规则比较复杂，需要专用术语“包含块”表述。

示例1。假设上图盒子是父元素，内部放入子元素，子元素设置width : 50%，它相对于父元素的哪块区域？

示例2。子元素设置定位absolute与坐标top: 20px，它相对于哪个祖先元素？相对该祖先元素的哪个区域？

上述问题的答案即“包含块containing block”，具体规则详情见“10.4 包含块”。简单场景下包含块理解为父元素的内容区。