内联模型和幽灵空白点

壹、内联模型

我们看一行html代码

<p> 这是一行代码<em>em</em>标签</p>

分析里边有很多的盒子

• 内容区域： 围绕文字看不见的盒子，大小受字符本身的大小决定 。但是如果是图片这种替换元素，没有字符，受图片大小决定。内容区域可以看成元素自身
• 内联盒子： 不会让内容成块显示，而是显示成一排，这里的内联实际就是说这个元素的外在盒子。这个盒子又分为匿名内联盒子和内联盒子。<em>em</em>这个就是内联盒子，这是一行代码和标签外边什么没有，只有文字的就是匿名内联盒子
• 行框盒子：每一行就是一个行框盒子，每个行框盒子又是一个一个的内联盒子组成
• 包含盒子： <p> 这是一行代码<em>em</em>标签</p>这种由一行一行的行框盒子组成的盒子叫包含盒子

贰、幽灵空白点

每个行框盒子之前有一个空白节点，这个空白节点永远透明，没有高度，无法获取，但是实实在在存在，表现和一个节点一模一样，所以叫幽灵空白点

<div ><span></span></div>

这个时候span里边什么也没有，我们却能看到div有高度，所以我们认为在span前边还有个宽度我为0的字符，这个字符的高度撑起了div