CSS 視覺美學

從基礎屬性到現代排版布局的深度探索

CSS 核心筆記

點選下方卡片進入各別的筆記與練習頁面

📦 筆記

Box Model 盒模型

理解 Margin, Border, Padding 與 Content。掌握 box-sizing: border-box 在佈局中的關鍵作用。

Spacing Sizing Border
查看筆記
🏗️ 筆記

Flexbox 彈性佈局

一維排版的核心,掌握主軸與交叉軸對齊,輕鬆實現物件的水平與垂直置中。

Flex Alignment Gap
查看筆記
🏁 筆記

Grid 網格系統

現代二維佈局,定義軌道與區域,處理複雜網頁架構的最強排版工具。

Grid Layout Template
查看筆記
📍 筆記

Position 定位技術

理解 Relative、Absolute 與 Fixed 的空間脫離關係,實作漂浮按鈕與固定選單。

Relative Absolute Z-index
查看筆記
🎯 筆記

Selectors 選擇器權重

掌握偽類、偽元素與後代選擇器,理解 CSS 權重計算規則,精準覆蓋樣式。

Pseudo Weight Cascade
查看筆記
🎨 筆記

CSS Variables 變數

利用 :root 管理色票與間距設定。提升代碼複用性,實作主題切換的設計系統。

Variables Root Design
查看筆記