CSS 基本語法
CSS 由選擇器 (Selector) 和宣告區塊組成，控制網頁的顏色、字體、間距與版面。
h1 { color: blue; font-size: 24px; }
.highlight { background-color: yellow; }
#header { position: fixed; }
a:hover { color: red; }
盒模型 (Box Model)
每個 HTML 元素都是一個矩形盒子，由 Content、Padding、Border、Margin 組成。使用 box-sizing: border-box 可簡化寬度計算。
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box;
}
Flexbox 與 Grid
Flexbox 適合一維布局，Grid 適合二維布局。
.container { display: flex; justify-content: center; align-items: center; gap: 10px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
響應式設計
透過 Media Queries 實現不同裝置的適配。
@media (max-width: 768px) {
.container { flex-direction: column; }
}