CSS笔记：9.行盒的盒模型

行盒的盒模型

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

显著特点：

1. 盒子与内容同步,跟着内容延伸，下一个行盒接着上一个行盒。
   

2. 行盒不能设置宽高。
   调整行盒的宽高，应该使用字体大小、行高、字体类型来间接调整。
   

3. 内边距（填充区padding）

• 水平方向有效，文字不变，只是移动。
• 垂直方向仅会影响背景，不会实际占据空间。
  水平方向：
  

垂直方向：

4. 边框 border

• 水平方向有效，文字不变，只是移动。
• 垂直方向，文字间距不变，边框不会实际占据空间。

5. 外边距 margin

• 水平方向有效，文字等进行移动。
• 垂直方向文字间距无变化，边框不会实际占据空间。

行块盒

diaplay：inline-block的盒子。

1. 不独占一行。
2. 盒模型中所有尺寸都有效。
   行块盒通常用于做分页。

空白折叠

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

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

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

1. 可替换元素：img、video、audio
2. 绝大部分可替换元素，都是行盒。
3. 可替换元素类似于行块盒，盒模型中所有尺寸都有效。（可以设置width、height）

图片适应属性：

• object-fit属性：边框适应方式。
• 取值：
  fill：默认取值，填满。
  contain：按长宽比例，保证不溢出。
  cover：填满，保证比例。所以会有部分内容舍弃掉。