[toc] ## pre 块级负责结构，内联负责内容 ## 什么是内联元素 内联元素的内联特指**外在盒子**（非容器/内在盒子），并且和display:inline不是一个概念。 `inline`、`inline-block`、`inline-table`都是内联元素，因为它们的外在盒子都是内联盒子。 就行为表现来看，内联元素的典型特征就是可以和文字在一行显示。 因此文字是内联元素，图片是内联元素，按钮是内联元素，输入框和下拉框等原生表单控件也是内联元素。 ## 内联盒模型 ### 内容区域(content area) 内容区域指一种围绕文字看不见的盒子（鼠标select选中文本后变蓝的那部分区域） 实际上并没有明确的定义，你可以把它当做一个em-box, 中文字符占据的1em高度区域， (还有一种说法->)也可将它等同于基本盒尺寸的content-box，都是content，语义上也说得通(**误！！**，content-box实际上应该由lineHeight决定，即em-box+上下半行间距)。 如果盒子非内联盒子而是块级盒，就会像下栗  (可以发现content-area区域小于content盒子区域(hotpink部分)) >[danger] content-area不等同于content-box 在IE和Firefox浏览器下，文字选中背景总能准确反映内容区域范围，但是Chrome浏览器下，`::selection`范围并不总是准确的，例如，和图片混排或则有垂直padding的时候，范围会明显过大，这一点需要注意。 #### character-box 内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子(`character box`)(?等价于em-box+两个半行间距，其实就是一个中文字符的line-height) #### 元素自身 而对于图片这样的**替换元素**，其内容显然不是文字，不存在字符盒子之类的，因此对于这些元素，内容区域可以看成元素自身。 ### 内联盒子(inline box) 内联盒子不会让内容成块显示，而是排成一行，这里的内联盒子实际指的就是元素的**外在盒子**，用来决定元素是内联还是块级。 #### 实名内联盒子 如果外部含内联标签(`<span>、<a>、<em>等`)则属于实名内联盒子，简称内联盒子 #### 匿名内联盒子 如果只是光秃秃的文本，则属于匿名内联盒子 但需要注意的是并不是所有光秃秃的文字都是匿名内联盒子，其**还有可能**是匿名**块级**盒子。 关键是要看前后的标签是内联还是块级（如果前后是块级，那么这个匿名盒子也会独占一行，So也就为一个块级匿名盒子） ### 行框盒子(line box) 也就是一行组成的一个盒子。 每一个行框盒子都是由一个个内联盒子组成的。 >[warning] **注意：** 行框盒子并不等于块级盒子，它并不是一个标签元素，而是由在一行显示的所有内联盒子组成的一个不可见的盒子。并且只有由内联盒子组成的才叫行框盒子。 > ### 包含盒子/包含块(containing box/block) 由一行一行的**行框盒子**组成的一个大盒子就叫包含盒子。 这个包含块一定是块级盒子吗？ 我们不关心它的外在盒子是怎么样的，**它的内在盒子/容器盒子 一定是块级**，只有当内在盒子为块级盒时，才能够容纳行框盒子，只有存在行框盒子时才会一行一行的显示，内联盒子们才会作为一行里的一部分被换行。  （即使限制了宽度，也不会换行显示，图文内容权重高于布局，也就会无视css设置的30px宽度）  (设置了block，则表示内容能够换行，这也是块级元素的特性之一) ## 幽灵空白节点(strut) >html5文档声明下 strut，在英文中的含义是**支柱**的意思。 规范中是这样定义的 >Each line box starts with a zero-width inline box with the element's font and line height properties.We call that imaginary box a "strut"。 > >[danger] display:inline 的元素如果内部为空，是不会在所处行框产生幽灵空白节点的， > >而display:inline-block 的元素即使内部为空 也是会产生幽灵空白节点的 > ``` <div><span style="display:inline-block"></span></div> ``` 无其它任何CSS代码，可以发现父容器被撑开了