一、从文档流说起

文档流、常规流、普通流、正常布局流都是指 Normal Flow，它定义了两种盒子：Block Box、Inline Box

块级元素、块级盒子都是指 Block Box 内联元素、行内元素、内联盒子都是指 Inline Box

文本流：文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式。 可以通过 CSS 属性进行设置：direction: ltr|rtl

当说块级元素时，其实是说 html 有些标签，在浏览器中，默认的 CSS 属性为display: block
当说行内元素时，其实是说 html 有些标签，在浏览器中，默认的 CSS 属性为display: inline

当我们没有使用 CSS 控制 HTML 样式时，浏览器按照默认 CSS 布局方式是：Normal Flow。
在 Normal Flow 中，Block Box 和 Inline Box 都有各自特定的行为表现。

在下面，我们叫做块级盒子和内联盒子，这可以比较好的和 CSS 盒子模型相对应，方便理解。

内联盒子（Inline Box）的行为

  1. 盒子不会产生换行
  2. width、height 属性不起作用
  3. 垂直方向的 padding、margin、border 会被应用，但不会把其他 Inline Box 推开
  4. 水平方向的 padding、margin、border 会被应用，但会把其他的 Inline Box 推开

块级盒子（Block Box）的行为

  1. 每个盒子都会换行
  2. width、height 属性可以发挥作用
  3. padding、margin、border 会将其他元素从当前盒子周围推开
  4. 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下，意味着盒子会和父容器一样宽

    个人理解的内联方向是上下左右，这也就是为什么块级盒子在垂直方向上，会和父容器 margin 合并。

二、常见标签列举

内联盒子（Inline Box）

标签 作用 标签 作用 标签 作用
a 锚点 abbr 缩写 u 下划线
b 粗体 bdo bidi override textarea 多行文本输入
br 换行 cite 引用 code 计算机代码
dfn 定义字段 em 强调 span 定义文本区块
i 斜体 img 图片 input 输入框
kbd 定义键盘文本 label 表格标签 q 短引用
s 中划线 samp 范例计算机代码 select 项目选择
small 小字体 sub 下标 sup 上标
strong 粗体强调

块级盒子（Block Box）

标签 作用 标签 作用 标签 作用
address 地址 blockquote 块引用 dl 定义列表
fieldset form 控制组 form 交互表单 h1~h6 各级标题
hr 水平分割线 menu 菜单列表 noscript 可选脚本内容
p 段落 pre 格式化文本 table 表格
ul 非排序列表 ol 排序列表

三、行内块盒子

display 有一个特殊的值，它在内联和块之间提供了一个中间状态 display: inline-block。
这对于以下情况非常有用：你不希望一个项切换到新行，但希望它可以设定宽度和高度。

行内块盒子（Inline-Block Box）的行为

  • 设置 width 和 height 属性会生效
    • 如果显式添加 width 和 height 属性，它只会变得比其内容更大
  • padding、margin、border 会推开其他元素
  • 不会跳转到新行

参考文章

《彻底理解行内元素和块级元素，不必硬背》
《Block Box 和 Inline Box —— mdn》