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填充了行的空白