#行盒的盒模型

常见的行盒:包含具体内容的元素

span、strong、em、i、img、video、audio

## 显著特点

  1. 盒子沿着内容延伸
  2. 行盒不能设置宽高(取决于内容)
  3. 调整行盒的宽高,应该使用字体大小、行高、字体类型间接调整
    →line-height:

  4. 内边距(填充区)
  5. padding水平方向有效,垂直方向仅会影响背景,不会实际占据空间

  6. 边框
  7. border水平方向有效,垂直方向仅会影响背景,不会实际占据空间

  8. 外边距
  9. margin水平方向有效,垂直方向仅会影响背景,不会实际占据空间

## 行块盒

display: inline-block 的盒子

  1. 不独占一行
  2. 盒模型中所有尺寸都有效
1 2 3 4 5 6 7 8 9 10

## 空白折叠

空白折叠,发生在行盒(行块盒)内部,或行盒之间

## 可替换元素 和 非可替换元素

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

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

可替换元素:img、video、audio

绝大部分可替换元素均为行盒

(在一行里)

可替换元素类似于行块盒,盒模型中,所有设置尺寸均有效