行盒的盒模型

行盒的盒模型

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

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

显著特点

1. 盒子沿着内容延伸。
2. 行盒不能设置宽高。

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

3. 内边距（填充区）

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

4. 边框

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

5. 外边距

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

行块盒

display：inline-block的盒子

1. 不独占一行；
2. 盒模型中所有尺寸都有效

空白折叠

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

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

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

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

可替换元素：img、video、audio

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

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