2D 和 3D 變換 CSS 變換（Transforms）允許你改變元素的形狀、大小、位置和旋轉角度，使網頁元素呈現出不同的視覺效果。變換分為兩種：2D 變換和 3D 變換。2D 變換在二維平面上操作，3D 變換則增加了深度感，使元素呈現出三維效果。 1. 2D 變換（2D Transforms） 2D 變換允許你在平面上（X 軸和 Y 軸）改變元素的形狀或位置。常用的 2D 變換函數...

過渡與動畫 CSS 過渡（Transitions）和動畫（Animations）使網頁元素能夠在狀態之間平滑過渡，從而提高用戶體驗和視覺效果。使用過渡和動畫，你可以讓頁面更具動感，並吸引用戶的注意力。 1. CSS 過渡（Transitions） 過渡是一種讓 CSS 屬性在一段時間內平滑改變的技術。它通常用於鼠標懸停、焦點事件或其他狀態變化時的效果。要創建過渡，需要使用 tran...

單位與尺寸 在 CSS 中，單位和尺寸是用來定義元素的大小、間距、字體大小等屬性的數值。正確使用單位可以使網頁設計更加靈活和響應式。CSS 中的單位主要分為兩類：絕對單位和相對單位。 1. 絕對單位 絕對單位（Absolute Units）是固定不變的，通常適合用於印刷設計，但在響應式設計中較少使用。以下是常見的絕對單位： px（像素，Pixels）：最常用的單位之一，1p...

媒體查詢 媒體查詢（Media Queries） 是 CSS3 中引入的一種功能，允許開發者根據不同設備的特性（如螢幕大小、解析度、方向等）來定義不同的樣式。通過媒體查詢，我們可以為各種設備提供針對性的樣式，從而實現響應式網頁設計（Responsive Web Design）。 1. 媒體查詢的基本語法 媒體查詢的語法通常使用 @media 規則，結合媒體類型（如 screen、pri...

CSS Grid 進階 在學習了 CSS Grid 的基礎知識後，接下來我們將深入了解其進階應用。進階使用 CSS Grid，可以更靈活地設計複雜的二維佈局，實現更具創意和響應性的網頁設計。 1. 網格佈局的進階屬性 grid-template: 是 grid-template-rows、grid-template-columns 和 grid-template-areas ...

CSS Grid 基礎 CSS Grid 是一種二維佈局系統，用於在網頁中構建複雜的佈局結構。與 Flexbox 不同，Grid 可以同時處理行和列的佈局，這使得它特別適合需要在兩個維度（水平和垂直）上進行控制的佈局情況，如網格佈局、畫廊、數據面板等。 1. Grid 基本概念 CSS Grid 的佈局結構包括以下主要元素： 網格容器（Grid Container）：設置為...

Flexbox 進階 在了解 Flexbox 的基礎概念後，可以進一步探索一些進階技巧和應用場景，來更靈活地控制佈局。在這一部分，我們將介紹 Flexbox 的進階屬性、常見佈局模式和實踐技巧。 1. Flexbox 進階屬性 除了前面提到的基本屬性外，還有一些進階的 Flexbox 屬性可幫助處理更複雜的佈局需求。 order: 控制彈性項目的排列順序。 ...

Flexbox 基礎 Flexbox（Flexible Box Layout，彈性盒子佈局）是一種一維的 CSS 佈局模型，旨在簡化在一條軸線（水平或垂直）上排列元素的過程。Flexbox 是創建響應式佈局和動態調整元素大小的理想選擇，特別適用於不確定或動態改變的元素數量或大小的佈局情況。 1. Flexbox 的基本概念 Flexbox 佈局主要涉及兩種角色： 彈性容器（F...

定位（Positioning） CSS 定位（Positioning）是用來控制 HTML 元素在頁面中的位置的方式。通過使用不同的定位方法，可以實現更加靈活、精確的元素佈局，從而創建各種複雜的網頁設計效果。CSS 提供了多種定位屬性，包括：static、relative、absolute、fixed 和 sticky。 1. 定位屬性概述 CSS 的 position 屬性用於設置元...

CSS 浮動與清除 浮動（Float） 和 清除（Clear） 是 CSS 中用於控制元素排列的基本屬性。了解這兩個屬性的作用和應用有助於創建靈活的佈局，特別是在設計多欄佈局和文字環繞效果時。 1. 浮動（Float） 浮動（float） 屬性允許將元素從標準文檔流中移出，並使其向左或向右對齊。當元素浮動時，後面的內容將環繞在其周圍。 語法： float: left |...