為什么 ::first-letter 是偽元素？
::first-letter 的作用是選擇并樣式化元素的第一個字母，它創建了一個虛擬的元素來包裹這個字母，因此屬于偽元素。
grid布局
案例一
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>CSS Grid布局完全指南</title><style>.code-example {background: #f4f4f4;padding: 15px;margin: 10px 0;border-radius: 5px;}.grid-visual {border: 2px solid #333;margin: 20px 0;padding: 10px;}.grid-item {background: #4CAF50;padding: 20px;border: 2px solid #fff;text-align: center;color: white;}</style>
</head><body><section><h2>實戰示例</h2><h3>基本網格布局</h3><div class="grid-visual" style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div><h3>復雜布局</h3><div class="grid-visual" style="display: grid;grid-template-columns: 200px 1fr;grid-template-rows: 100px 1fr 50px;grid-template-areas:'header header'// 同樣是header 的格子會自動合并'sidebar main''footer footer';height: 400px;gap: 15px;"><div class="grid-item" style="grid-area: header">Header</div><div class="grid-item" style="grid-area: sidebar">Sidebar</div><div class="grid-item" style="grid-area: main">Main Content</div><div class="grid-item" style="grid-area: footer">Footer</div></div></section>
</body></html>
案例二
<!DOCTYPE html>
<html><head><style>.container {display: grid;grid-template-columns: repeat(3, 100px);/* 3列，每列100px */grid-template-rows: repeat(3, 100px);/* 3行，每行100px */gap: 10px;background: #eee;padding: 20px;}.item {background: #4CAF50;border: 2px solid #333;padding: 20px;font-family: Arial;color: white;display: flex;align-items: center;justify-content: center;}</style>
</head><body><div class="container"><div class="item item1">Item 1</div><div class="item item2">Item 2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>
</body></html>
案例三
在案例二的基礎上加上grid-area的效果，注意細品
<!DOCTYPE html>
<html><head><style>.container {display: grid;grid-template-columns: repeat(3, 100px);/* 3列，每列100px */grid-template-rows: repeat(3, 100px);/* 3行，每行100px */gap: 10px;background: #eee;padding: 20px;}.item {background: #4CAF50;border: 2px solid #333;padding: 20px;font-family: Arial;color: white;display: flex;align-items: center;justify-content: center;}.item1 {grid-column: 1 / 3;/* 列從第1線到第3線（占據第1、2列） *//* 列范圍 */grid-row: 1 / 2;/* 行從第1線到第2線（占據第1行） *//* 行范圍 */background: #2196F3;}.item2 {grid-area: 2 / 2 / 4 / 4; /* 行開始/列開始/行結束/列結束 *//* 簡寫語法 */background: #FF5722;}</style>
</head><body><div class="container"><div class="item item1">Item 1</div><div class="item item2">Item 2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>
</body></html>
案例四
注意grid-auto-flow: row dense;這行的作用
<!DOCTYPE html>
<html><head><style>.container {display: grid;grid-template-columns: repeat(2, 100px);/* 顯式列：2列 */grid-template-rows: repeat(1, 50px);/* 顯式行：1行 */grid-auto-columns: 100px;/* 隱式列寬度 */grid-auto-rows: 50px;/* 隱式行高度 */grid-auto-flow: row dense;/* 自動排列方式 */gap: 10px;background: #eee;padding: 20px;}.item {background: #4CAF50;padding: 20px;border: 2px solid #333;color: white;display: flex;align-items: center;justify-content: center;}/* 特殊項目樣式 */.item.wide {grid-column: span 2;}/* 橫跨2列 */.item.tall {grid-row: span 2;}/* 豎跨2行 */</style>
</head><body><div class="container"><div class="item">1</div><div class="item wide">2（跨2列）</div><div class="item">3</div><div class="item tall">4（跨2行）</div><div class="item">5</div><div class="item">6</div></div>
</body></html>
如果沒有grid-auto-flow: row dense;，是以下效果
row dense填充了行的空白
)
