CSS中的“盒子”

这里说的“盒子”并不是CSS框模型（Box Model，也叫盒子模型），而是与元素结构和内容显示相关的形象说法。（框模型的介绍可访问博客 https://www.cnblogs.com/sichaoyun/p/6761341.html）

    CSS中的盒子原本只有块级盒子（block-level box）和内联盒子（inline box）,块级盒子负责结构，内联盒子负责内容。

    附加盒子：学名“标记盒子”（marker box），比如 list-item（ <li> 元素默认display: list-item），其默认显示项目符号。所有“块级元素”都有一个“主块级盒子”，而list-item除此之外还有一个“附加盒子”。

    外在盒子和内在盒子：例如 display: inline-block的元素，披着 inline 的皮，藏着 block 的心。 每个元素都两个盒子，外在盒子和内在盒子。外在盒子负责元素是可以一行显示，还是只能换行显示（即体现元素是内联元素还是块级元素）；内在盒子负责宽高、内容呈现等。（内在盒子又称为“容器盒子”）。   

     按照 display 的属性值不同，值为 block 的元素的盒子实际由外在的“块级盒子”和内在的“块级容器盒子”组成，值为 inline-block 的元素则由外在的“内联盒子”和内在的“块级容器盒子”组成，值为 inline 的元素则内外均是“内联盒子”。所以display属性值是inline-block的元素既能和图文一行显示，又能直接设置width/height （作用在内在盒子上），因为有两个盒子，外面的盒子是inline级别，里面的盒子是block级别。