題幹與適用場景
設計系統中的按鈕標籤可能混排拉丁字母、漢字、數學符號與行內 SVG 圖示。同一元件在行內格式化上下文、Flex 和 Grid 中重用，設計要求文字與圖示在不同書寫模式下仍保持視覺基線一致。請說明 alignment-baseline 的職責、與 vertical-align 的界線、回退策略及測試方法。
這道題考察基線模型與布局上下文判斷，不是記憶一個固定像素偏移。CSS Inline Layout Level 3 定義 alphabetic、ideographic、central、mathematical、middle、text-top 和 text-bottom 等基線類型，並規定屬性可用於行內盒、Flex 項、Grid 項、表格儲存格與 SVG 文字元素。
面試官考察點
強回答會先確認對齊上下文，再選擇基線類型；會說明預設 baseline 使用父層主導基線，而 middle 在直立文字方向可能改用 central 基線。回答也應區分「選哪條基線」與「沿基線再移動多少」的責任，後者屬於 baseline-shift 或布局對齊屬性。
面試官會追問是否知道 alignment-baseline 不繼承、動畫類型是離散，以及 SVG 文字和 HTML 盒子的基線來源不同。若只給 top、center 的視覺補丁，沒有多語文字型與回退測試，通常代表規範邊界掌握不足。
澄清問題
對齊對象
確認對象是行內圖示、Flex 項、Grid 項、表格儲存格還是 SVG 文字。不同上下文會改變基線集合的建立方式，不能直接套用行內範例。
字型與書寫模式
確認是否混用拉丁、漢字、阿拉伯文、數學字型，以及是否有直排。基線名稱表達的是文字腳本語義；「視覺中心」不等於每種腳本的幾何中心。
相容目標
確認目標瀏覽器、是否允許 SVG 專用別名，以及舊瀏覽器是否必須維持按鈕高度、焦點環與點擊區域。回退應服務可用性，而非只追求截圖像素相同。
30 秒回答框架
「我先確認布局上下文、腳本與書寫模式，再選擇基線。baseline 跟隨父層主導基線；混合腳本時用 ideographic、alphabetic 或 mathematical 表達語義，middle 只在確實需要 x-middle 或 central 語義時使用。alignment-baseline 負責選基線，額外位移交給 vertical-align、baseline-shift 或 Box Alignment。先保留現有可用樣式，再用能力檢測增強，並在真實瀏覽器檢查 CSSOM、字型載入、SVG、Flex、Grid 和直排。」
分步深入解答
第一步：建立基線決策表
為每類內容記錄主腳本、布局上下文與期望關係。普通拉丁文字通常使用 baseline 或 alphabetic；漢字下沿對齊可考慮 ideographic；數學式使用 mathematical；圖示若要隨文字落在主基線，先驗證 SVG 文字位置與外層盒子的基線來源。
第二步：區分屬性職責
alignment-baseline 選擇盒子參與對齊時採用的基線。vertical-align 是行內與表格等場景的複合控制，可同時涉及基線來源與偏移。Flex 和 Grid 的跨項基線對齊由 Box Alignment 建立基線集合；不要把 vertical-align 當作通用 Flex 垂直置中開關。
第三步：寫出可審查的樣式
把基線選擇放在元件變體類別，避免用魔法數字掩蓋腳本差異：
.label {
alignment-baseline: baseline;
}
.label--cjk {
alignment-baseline: ideographic;
}
.math-icon {
alignment-baseline: mathematical;
}這些宣告表達語義，不保證每個字型的墨跡邊緣重合。若設計需要細微位移，應記錄原因並使用獨立偏移規則，而非修改基線類型碰運氣。
第四步：處理 Flex、Grid 與 SVG
在 Flex 或 Grid 中先確認容器是否使用基線對齊，再檢查第一或最後基線集合。多行行內區塊還涉及 baseline-source 的 first 或 last 選擇。SVG 文字的基線值會對齊到 SVG 目前文字位置；HTML 圖示盒子則受內容與外層布局影響，二者要分別測量。
第五步：設計回退與能力檢測
對關鍵互動先保留現有 display、尺寸與焦點樣式，再用 @supports 或逐條宣告增強基線選擇。舊瀏覽器忽略無法解析的宣告時，仍應保留可讀文字與完整點擊區域。不要把 Baseline 2026 的新可用性標籤當成所有企業內置瀏覽器都已升級的證明。
第六步：驗證真實結果
測試矩陣至少覆蓋拉丁與漢字混排、數學字型、SVG 圖示、Flex、Grid、表格、橫排與直排、字型未載入和載入完成兩種時機。透過 DevTools 檢查計算值與級聯來源，使用截圖或像素測量確認焦點環、行高、溢出和點擊區域沒有回歸。
高品質示範回答
我會先收集布局上下文、腳本與書寫模式。alignment-baseline 只回答「這個盒子用哪條基線參與對齊」；vertical-align、baseline-shift 和 Box Alignment 負責其他偏移或基線分組。普通標籤先用 baseline，漢字或數學內容在確有語義需求時分別用 ideographic 或 mathematical。SVG 文字要按 SVG 目前文字位置單獨驗證，不能假設它與 HTML 行內盒共享同一條幾何線。
實作上保留可用基礎樣式，再透過能力檢測或元件變體宣告增強。驗證覆蓋字型載入時序、Flex 和 Grid 基線分組、混合腳本、直排、舊瀏覽器解析、CSSOM 最終值及焦點與點擊區域。若視覺問題來自字型度量，我會修正字型或行高契約，而不是繼續疊加偏移量。
常見錯誤
- 錯誤表現 → 用
vertical-align: middle解決所有圖示 → 失敗原因 → 行內、Flex 和 Grid 的基線模型不同 → 修正方法 → 先確認布局上下文，再選擇基線或 Box Alignment。 - 錯誤表現 → 把
middle當成幾何中心 → 失敗原因 → 它依賴 x-middle 或 central 基線語義 → 修正方法 → 用腳本和書寫模式決定值。 - 錯誤表現 → 只測拉丁字母 → 失敗原因 → 漢字、數學字型和直排使用不同基線 → 修正方法 → 建立多腳本矩陣。
- 錯誤表現 → 看到瀏覽器支援標籤就刪除回退 → 失敗原因 → 企業瀏覽器與 SVG 行為仍可能落後 → 修正方法 → 保留可用基礎樣式並做能力檢測。
- 錯誤表現 → 用負 margin 修圖示 → 失敗原因 → 字型載入、字級和行高變化會放大偏移 → 修正方法 → 先修正基線契約，再保留有註解的最小位移。
追問及應對
追問一：為什麼不直接使用 align-items: center？
幾何置中會失去文字基線語義，混排文字時上下邊緣可能看似置中卻不在同一閱讀線。只有設計目標確實是盒子中心時才使用中心對齊；文字與圖示共線應優先採用基線對齊。
追問二：alignment-baseline 會繼承嗎？
不會。每個元素按自身計算值參與對齊，因此元件變體要在實際對齊項上宣告，不能只在祖先設定後期待所有後代自動繼承。
追問三：SVG 的 text-top 和 text-bottom 能否用於普通 HTML？
規範為 SVG 保留歷史別名，普通 HTML 方案不應依賴這些別名。跨上下文設計應使用標準基線值，並對 SVG 與 HTML 分別做回退測試。
追問四：何時應改字型而不是 CSS？
當同一基線值在不同字型、字重或載入階段產生穩定墨跡差異時，問題屬於字型度量契約。先統一字型與行高，再用 CSS 表達布局關係；不要用多串偏移量掩蓋字型資產不一致。