HTML 行盒元素、行块盒及可替换元素特点

HTML 行盒元素、行块盒及可替换元素特点

一、常见行盒元素

• 常见的行盒元素有 span、strong、em、i、img、video、audio、a。
• 这些行盒元素的特点如下：
  • 盒子填充与宽度：盒子沿着内容方向填充，宽度由内容决定。
  • 宽高设置：行盒元素不可以直接设置宽高，只能设置行高。调整行盒的宽高需使用字体大小、行高、行间距、字体类型等属性间接设置。
  • 内边距：水平方向有效，垂直方向无效且只能影响背景，不会实际占空间。
  • 边框：水平方向有效，垂直方向无效且只能影响背景，不会实际占空间。
  • 外边距：水平方向有效，垂直方向无效。

二、行块盒

• 定义为 display: inline-block; 的盒子。
• 特点包括：
  • 显示方式：不独占一行。
  • 盒子模型尺寸：盒子模型尺寸都有效，可以设置宽高、行高以及内外边距。
  • 空格折叠：空白折叠发生在行盒内部或者行块盒之间。

三、可替换元素与非可替换元素

• 非可替换元素：大部分元素页面上显示的结果取决于元素的内容，如常见的文本标签等。
• 可替换元素：少部分元素页面上显示的结果取决于元素属性，如 img、video、audio。
  • 行盒特性：绝大部分可替换元素均为行盒。
  • 盒子模型：可替换元素类似于行块盒，盒子模型中所有尺寸都有效，包括宽高。