25. 行盒的盒模型 {ignore}

本节课结束后，后续课程开始讲解和布局相关的知识点。

[toc]

常见的行盒：包含具体内容的元素，如：span、strong、em、i、img、video、audio。

由于行盒的盒模型和块盒的盒模型存在较大的差异，所以单独抽一节课出来讲解行盒的盒模型。

1. 显著特点

1. 盒子沿着内容沿伸

2. 行盒不能设置宽高

   • 调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。

3. 内边距（填充区）

   • 水平方向有效，垂直方向仅会影响背景，不会实际占据空间。

4. 边框

   • 水平方向有效，垂直方向仅会影响背景，不会实际占据空间。

5. 外边距

   • 水平方向有效，垂直方向不会实际占据空间。

2. 行块盒

行块盒，指的是 display 属性值为 inline-block 的元素。

特点：

• 不独占一行
• 盒模型中所有尺寸都有效

应用：demos 2. 分页

行块盒，在实际中，经常用来做分页。

3. 空白折叠

空白折叠：发生在行盒内部 或 行盒之间，行块盒内部 或 行块盒之间。

4. 可替换元素 和 非可替换元素

• 非可替换元素

  • 大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素

• 可替换元素

  • 少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

  • 可替换元素：img、video、audio、input等，这些元素都是行盒display: inline;，但是可以设置盒模型中的所有尺寸；

    • img 若指设置了width，那么height会按照比例缩放；
  • 绝大部分可替换元素均为行盒，而且，可替换元素类似于行块盒 display: inline-block;，盒模型中所有尺寸都有效。

object-fit

object-fit mdn

指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框，该属性一般应用于图片、视频、音频。

小结

• 行盒的特点

  • 设置 height 和 width 无效，行盒的尺寸由元素内容决定，需要通过调节内容的尺寸（与文本相关的css属性）来间接调节行盒的尺寸。
  • padding 和 border 和 margin，只有在水平方向上会生效；且 padding 和 border 仅影响背景区域，且不会实际占据空间。

• inline-block 类型的元素的特点

  • 设置 width、height、padding、border、margin 都能生效，这一点和块盒类似；
  • 不会换行，这一点和行盒类似；

• 空白折叠

  • 但凡是 inline 类型的元素（即：inline、inline-block），都会存在空白折叠的问题；
  • 解决方式：可以将给父级添加一条css声明：font-size: 0;，将字体尺寸设置为0，由于空格也算是文本（字体），所以就能将空白去掉。

• 可替换元素

  • 如果一个元素，是行盒，而且是可替换元素，那么可以将其视作为一个行块盒。