比较`block`, `inline`, 和 `inline-block`?
- 为什么字体不能称为盒模型？
- 文字遵循的是“排版学（typography）”，不是“布局学（layout）”。让 inline 像 block 那样能控制尺寸，会破坏整行文字的排版秩序，这就是 CSS 历史上明确禁止的行为。
- 为什么 inline 元素不能设置 width/height，而 inline-block 可以？请用一句话解释本质原因。
- inline 参与 inline formatting context，不生成可以参与宽高计算的 block-level box，因此 width/height 会被忽略。inline-block 会生成 block-level box（使用 box model），所以可以设置 width/height，同时仍按 inline 方式排版。
- 为什么 inline 的垂直 padding/margin 会显示出来，但不影响布局？请说明浏览器在渲染流程中发生了什么。
- 因为 inline 元素不生成可参与尺寸计算的盒子，它的高度由 line box（由字体 metrics + line-height）决定。vertical padding/margin 不参与 layout，只在 paint 阶段绘制出来，因此会显示但不会撑开行高。
- 为什么 block 元素会独占一行？浏览器使用哪一种布局模型决定了这种行为？
- block 元素参与 Block Formatting Context，生成 block-level box。BFC 的规则是：block-level boxes 在垂直方向按顺序堆叠，每个 block-level box 都必须从新行开始，因此它天然独占一行，并默认占满父容器的可用宽度。
- block、inline、inline-block 的核心区别是什么？请分别用一句话概括。
- block：参与 BFC（Block Formatting Context），生成 block-level box，独占一行、宽度默认填满父容器。
- inline参与Inline Formatting Context（IFC），只是文本流一部分，不生成可设置宽高的独立box。
- inline-box生成box-level可设置宽高，按照inline方式参与IFC，可以和文字同行。
- 什么时候必须使用 inline-block 而不是 inline 或 block？请举一个具体组件例子。
- 需要一个元素既能参与 inline 排版，能与文字在同一行，又需要完整盒模型能力（可设宽高、padding、border）时必须使用 inline-block。典型例子是按钮、input、badge、tag、图标组件。inline 做不到设宽高，block 会强制换行，因此 inline-block 是唯一选择。
- 如果要让一排 form 控件（input、button、select）自然排成一行并可定宽高，应该使用哪种 display？为什么？
- 选 inline-block。因为表单控件需要完整的盒模型能力（可设宽度、高度、padding、border），而 inline 无法设置宽高，block 会强制换行。
- 为什么 vertical-align 对 block 无效”。
- vertical-align 是 inline formatting context 的对齐机制，它调整 inline / inline-block 元素在同一行（line box）中的垂直基准位置，如 baseline、middle、text-bottom 等。block 元素参与的是 block formatting context，没有 line box、没有 baseline，也不与其他元素共享同一行，因此 vertical-align 对它完全无效。
- 浏览器在一行中是如何决定 inline / inline-block 的基线（baseline）位置的？ascent / descent 如何决定行高？
- 浏览器会把一行中所有 inline 元素的ascent/descent 取最大，再与 line-height 比较，取较大的值作为最终行高。
- inline（文本）的 baseline 来自字体 metrics；inline-block 的 baseline = 它的 margin box 底部（除非内容为文本，则取内容文本的 baseline）。
- 为什么 UI 组件库中的按钮（如 Ant Design、Bootstrap、Material UI）默认使用 inline-block？请从布局流（formatting context）和盒模型（box model）两个方面解释原因。
- inline-block = 参与 IFC 的 block-level box。inline-block 既能生成 block-level box（可控尺寸），又参与 inline formatting context（可与文字同行），因此是按钮的最佳 display 方式。
- 为什么下面的按钮会出现“下沉”现象？inline-block 的 baseline 是如何导致这个问题的？至少给两种修复方案。
- 因为 inline-block 的 baseline 默认是 margin-box 的底部, 而不是内容基线。可以使用 flex。