壹、内联模型
我们看一行html代码
<p> 这是一行代码<em>em</em>标签</p>
分析里边有很多的盒子
- 内容区域： 围绕文字看不见的盒子，大小受字符本身的大小决定 。但是如果是图片这种替换元素，没有字符，受图片大小决定。内容区域可以看成元素自身
- 内联盒子： 不会让内容成块显示，而是显示成一排，这里的内联实际就是说这个元素的外在盒子。这个盒子又分为匿名内联盒子和内联盒子。
<em>em</em>这个就是内联盒子，这是一行代码和标签外边什么没有，只有文字的就是匿名内联盒子 - 行框盒子：每一行就是一个
行框盒子，每个行框盒子又是一个一个的内联盒子组成 - 包含盒子：
<p> 这是一行代码<em>em</em>标签</p>这种由一行一行的行框盒子组成的盒子叫包含盒子
贰、幽灵空白点
每个行框盒子之前有一个空白节点，这个空白节点永远透明，没有高度，无法获取，但是实实在在存在，表现和一个节点一模一样，所以叫幽灵空白点
<div ><span></span></div>
这个时候span里边什么也没有，我们却能看到div有高度，所以我们认为在span前边还有个宽度我为0的字符，这个字符的高度撑起了div
