css基本功

为什么 ::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填充了行的空白