"Layout"
- 視覺對齊用單一真實來源 視覺對齊的本質是『同一條基準線在多個元素上重現』 — 任何元素的尺寸沒有來源明確的數字,整條線都靠不住。本文說明 CSS 變數 + 必要時 ResizeObserver 寫回,讓多處引用同一個值。
- 量測值缺一不可:依賴未測量值會錯位 對齊本質是『同一條基準線在多個元素上重現』 — 任何一個元素的高度沒有確定值、整條線都靠不住。本文展開『把對齊問題當線性方程組』的角度。
- 置中元件與絕對定位元件並存:用疊層而非排擠 中央欄需要置中、側邊元件需要指定位置 — 兩者要共存,關鍵是讓側邊元件用 absolute 跳出 layout 流,中央欄完全感知不到它。本文展開疊層式並存的設計。
- 同一個元件在三種互動狀態下顯示位置不同的 root cause 當元件「跟著狀態飄」、不同互動狀態下出現在不同位置 — 不是元件本身的問題,是它依賴的『定位錨點』本身在動。本文以 scope UI 三狀態飄移為例,展開錨點分析法。