一.CSS 選擇器

1. 屬性選擇器

屬性選擇器允許根據元素的屬性及屬性值來選擇元素：

2. 偽類選擇器進階

除了常見的:hover、:active，這些偽類也非常實用：

3. 偽元素的妙用

偽元素用于創建不在 DOM 中的虛擬元素，常用的有：

二.盒模型：布局的基礎

1. 內容區（content）：實際內容所在區域
2. 內邊距（padding）：內容區與邊框之間的空間
3. 邊框（border）：圍繞內邊距和內容區的線
4. 外邊距（margin）：邊框外的空間，用于與其他元素分隔

三.布局

1. Flexbox 布局

Flexbox（彈性盒布局）是一維布局模型，適用于行或列的布局：

2. Grid 布局

Grid（網格布局）是二維布局模型，適用于復雜的行列布局：

3. 響應式設計與媒體查詢

媒體查詢允許根據設備特性應用不同的樣式：

四.常用css屬性

1. 文本樣式

   • color：文本顏色（#ff0000、rgb(255,0,0)、red）
   • font-size：字體大小（16px、1.2em、120%）
   • font-family：字體（"Microsoft YaHei", sans-serif）
   • text-align：對齊方式（left、center、right）
   • line-height：行高（1.5表示 1.5 倍字體大小）

2. 盒模型屬性
   控制元素的布局和間距（核心概念）：

   • width/height：內容區域寬高
   • padding：內邊距（內容與邊框的距離）
   • margin：外邊距（元素與其他元素的距離）
   • border：邊框（border: 1px solid #ccc;）

3. 背景屬性

   • background-color：背景色
   • background-image：背景圖（url("bg.jpg")）
   • background-repeat：背景圖重復方式（no-repeat、repeat-x）

4. 布局屬性

   • display：元素顯示類型（block、inline、flex、grid）
   • position：定位方式（static、relative、absolute、fixed）
   • float：浮動（left、right）