内联级元素

简介

1 .定义：内联元素的内联指的是“外在盒子”
2 .表现：可以和文字在一行显示。因此文字是内联元素，图片是内联元素，按钮，下拉框，输入框也都是内联元素

内联盒模型

截屏2022-02-28 下午10.41.22.png

代码

截屏2022-02-28 下午10.40.58.png

实际表现，以及实际的html效果

内容区域

1 .围绕文字的看不见的盒子，大小和文字大小有关。

2 .可以理解为鼠标选中文字的大小,比如这样 截屏2022-02-28 下午10.44.20.png

内联盒子

1 .inline box,内联盒子不会让内容成块显示，而是排成一行
2 .如果有内联标签，那么就属于内联盒子，比如em形成的，如果是个光秃秃的文字，比如上图里面“这是一行普通文字”，“标签”这些，就属于匿名内联盒子

行框盒子line box

1 .每一行就是一个行框盒子,行框盒子就是有一个又一个的内联盒子组成的(p里面的)

image.png

包含盒子

1 .p标签就是一个包含盒子，此盒子由一行又一行的行框盒子组成（包含p的）

image.png

幽灵空白节点

1 .在HTML5文档中，内联元素的所有解析和渲染表现就如同行框盒子的前面有一个空白节点一样。这个空白节点永远透明，不占据任何宽度，看不见也无法通过脚本获取，就像幽灵一样

<style type="text/css">
       div{
           background-color: blueviolet;
       }
       span{
           display: inline-block;
       }
    </style>

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

2 .如上代码所示，div没有高度，应该是高度是0，但是实际高度是22px。就是因为前面的幽灵空白节点虽然是一个宽度为0的空白字符，但是有高度
3 .官方文档里面叫他struct