HTML 行盒元素、行块盒及可替换元素特点
一、常见行盒元素
- 常见的行盒元素有
span、strong、em、i、img、video、audio、a。 - 这些行盒元素的特点如下：
- 盒子填充与宽度：盒子沿着内容方向填充，宽度由内容决定。
- 宽高设置：行盒元素不可以直接设置宽高，只能设置行高。调整行盒的宽高需使用字体大小、行高、行间距、字体类型等属性间接设置。
- 内边距：水平方向有效，垂直方向无效且只能影响背景，不会实际占空间。
- 边框：水平方向有效，垂直方向无效且只能影响背景，不会实际占空间。
- 外边距：水平方向有效，垂直方向无效。
二、行块盒
- 定义为
display: inline-block;的盒子。 - 特点包括：
- 显示方式：不独占一行。
- 盒子模型尺寸：盒子模型尺寸都有效，可以设置宽高、行高以及内外边距。
- 空格折叠：空白折叠发生在行盒内部或者行块盒之间。
三、可替换元素与非可替换元素
- 非可替换元素：大部分元素页面上显示的结果取决于元素的内容，如常见的文本标签等。
- 可替换元素：少部分元素页面上显示的结果取决于元素属性，如
img、video、audio。- 行盒特性：绝大部分可替换元素均为行盒。
- 盒子模型：可替换元素类似于行块盒，盒子模型中所有尺寸都有效，包括宽高。
