行盒

行盒display：inline。

行盒有以下3点需要注意：

1、多个行内元素依次在一行显示，如果文字超出了包含块的宽度，才进行换行显示。

2、块盒包含行盒，行盒尽量不要包含块盒。

3、行盒给定位、浮动时3display：inline会自动变为display:block。

页面的具体内容都会生成行盒（文字、图片、多媒体）：

1、文字必须放在行盒内，否则浏览器会生成匿名行盒。

2、图片和多媒体：默认生成行盒。

行盒的特征：

1、行盒可以被折断，因为内容可以折断换行，可通过word-break属性设置折断位置。

normal默认值，使用浏览器的断词规则（英文单词间截断，中文文字间截断）

keep-all对所有文字只能在空白和标点位置截断

break-all英文字母间可截断，中文文字间可截断

行盒的位置

1、行盒的定位体系必定是常规流,浮动和绝对定位的盒子会自动变成块盒。

2、行盒在包含块中，避开浮动和常规流盒子。

3、包含行盒的块盒，可使用txet-align调整行盒在它内部的对齐方式。

4、多个行内标签对齐方式,给需要对齐的行内标签加vertical-align：每一个行盒以及包含行盒的元素，会在其内部创建多根参考线，行盒默认使用基线对齐(vertical-align:baseline):将自己的基线与包含块的基线对齐，可调整vertical-align属性值，选择其他对齐方式。通常情况下：1、可使用vertical-align调整图片和其前后文字的对齐方式2、可使用vertical-align消除行盒与外部盒块底部的空隙。

可替换元素

img、video、audio（图片、视频、音频）

特点：设置宽高有效。

1、没有给图片尺寸，是图片原始尺寸

2、给固定宽、高。适用于图片小于或大于包含块。给固定宽高可能导致图片失帧

3、只设置宽或高的尺寸，图片等比例缩放

非可替换元素

a、span、strong、i、q、em等大部分文本类元素

特点：设置宽高无效

1、垂直方向上的margin、border、padding不占据实际尺寸。

2、width和height必须自动，数值无效。

3、可使用line-height设置一行文字高度，要在那个元素身上垂直居中就给该元素的高。但是有隐患，如果文字换行会影响布局。