CSS基础使用完全指南：从零开始掌握样式表

路人甲乙丙丁
Web 开发
20天前
86热度
1评论

1. 前言：CSS是什么？为什么需要CSS？

CSS（Cascading Style Sheets，层叠样式表）是网页的“皮肤”和“化妆品”。HTML负责定义网页的内容结构（骨架），而CSS负责控制这些内容的呈现方式——颜色、大小、位置、动画等。没有CSS的网页就像黑白文档，有了CSS才能变成色彩丰富、布局精美的视觉作品。

本教程能带给你什么？
✅ 系统掌握CSS核心语法与选择器
✅ 深入理解盒模型与布局原理
✅ 掌握Flexbox和Grid现代布局
✅ 学会响应式设计与媒体查询
✅ 了解动画、过渡和CSS变量
✅ 实战：完整的企业官网样式实现

本教程覆盖CSS的绝大多数基础知识点，适合零基础入门和进阶巩固。

2. CSS基础语法

2.1 CSS的三种引入方式

方式一：内联样式（不推荐）

<div style="color: red; font-size: 16px;">红色文字</div>

方式二：内部样式表（单页适用）

<head>
    <style>
        p { color: blue; }
    </style>
</head>

方式三：外部样式表（推荐）

<head>
    <link rel="stylesheet" href="style.css">
</head>

/* style.css文件内容 */
p { color: blue; }

2.2 CSS基本语法结构

/* 选择器 { 属性: 值; 属性: 值; } */
h1 {
    color: #333;        /* 文字颜色 */
    font-size: 24px;    /* 字体大小 */
    text-align: center; /* 文字对齐 */
}

选择器：决定样式作用于哪些元素
属性：要改变的样式特征
值：属性的具体取值

3. CSS选择器详解

选择器是CSS最核心的部分，决定了样式的作用范围。

3.1 基础选择器

选择器	语法	示例	说明
元素选择器	element	p { }	选中所有<p>元素
类选择器	.class	.header { }	选中class="header"的元素
ID选择器	#id	#logo { }	选中id="logo"的元素
通配选择器	*	* { }	选中所有元素

/* 示例 */
p { color: blue; }           /* 所有段落蓝色 */
.highlight { background: yellow; }  /* 高亮类 */
#main-title { font-size: 28px; }    /* ID选择器 */

3.2 组合选择器

/* 后代选择器（空格） */
div p { color: red; }        /* div内的所有p */

/* 子选择器（>） */
div > p { color: red; }      /* 直接子元素p */

/* 相邻兄弟选择器（+） */
h1 + p { margin-top: 0; }    /* h1后面紧邻的p */

/* 通用兄弟选择器（~） */
h1 ~ p { color: gray; }      /* h1后面的所有p */

3.3 属性选择器

/* 拥有特定属性 */
a[target] { color: red; }

/* 属性值完全匹配 */
a[target="_blank"] { color: red; }

/* 属性值包含某词（空格分隔） */
a[class~="external"] { color: red; }

/* 属性值开头匹配 */
a[href^="https"] { color: green; }

/* 属性值结尾匹配 */
a[href$=".pdf"] { color: red; }

/* 属性值包含子串 */
a[href*="example"] { color: blue; }

3.4 伪类选择器

/* 链接状态 */
a:link { color: blue; }      /* 未访问 */
a:visited { color: purple; } /* 已访问 */
a:hover { color: red; }      /* 鼠标悬停（最常用） */
a:active { color: orange; }  /* 点击瞬间 */

/* 结构性伪类 */
li:first-child { color: red; }   /* 第一个子元素 */
li:last-child { color: red; }    /* 最后一个子元素 */
li:nth-child(2) { color: red; }  /* 第2个子元素 */
li:nth-child(even) { color: red; } /* 偶数子元素 */
li:nth-child(odd) { color: red; }  /* 奇数子元素 */

/* 表单伪类 */
input:focus { border-color: blue; }  /* 获取焦点时 */
input:checked { background: green; } /* 选中状态 */
input:disabled { opacity: 0.5; }     /* 禁用状态 */
input:required { border-color: red; } /* 必填字段 */

3.5 伪元素选择器

/* ::before - 在元素内容前插入 */
p::before {
    content: "▶ ";
    color: blue;
}

/* ::after - 在元素内容后插入 */
p::after {
    content: " ←";
    color: blue;
}

/* ::first-line - 首行 */
p::first-line { font-weight: bold; }

/* ::first-letter - 首字母 */
p::first-letter { font-size: 200%; }

/* ::selection - 选中文本 */
p::selection { background: yellow; }

3.6 选择器优先级（权重）

当多个选择器作用于同一元素时，按权重决定最终样式：

选择器类型	权重值	示例
内联样式	1000	style="color:red"
ID选择器	100	#header
类/属性/伪类	10	.box, :hover
元素/伪元素	1	p, ::before
通配符	0	*

/* 权重计算示例 */
#header .nav li a { }  /* 100 + 10 + 1 + 1 = 112 */
.nav li a:hover { }    /* 10 + 1 + 1 + 10 = 22 */
p { }                  /* 1 */

4. 文本与字体样式

4.1 字体属性

/* 字体族 */
font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;

/* 字体大小 */
font-size: 16px;        /* 像素 */
font-size: 1.2em;       /* 相对于父元素 */
font-size: 1.2rem;      /* 相对于根元素(html) */
font-size: 120%;        /* 相对于父元素 */

/* 字体粗细 */
font-weight: normal;    /* 400 */
font-weight: bold;      /* 700 */
font-weight: 100-900;

/* 字体样式 */
font-style: normal;     /* 正常 */
font-style: italic;     /* 斜体 */

/* 行高 */
line-height: 1.5;       /* 相对值 */
line-height: 24px;      /* 固定值 */

/* 简写（顺序固定） */
font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif;

4.2 文本属性

/* 颜色 */
color: #333;            /* 十六进制 */
color: rgb(51, 51, 51); /* RGB */
color: rgba(51, 51, 51, 0.8); /* 带透明度 */

/* 文本对齐 */
text-align: left;       /* 左对齐（默认） */
text-align: center;     /* 居中 */
text-align: right;      /* 右对齐 */
text-align: justify;    /* 两端对齐 */

/* 文本装饰 */
text-decoration: none;          /* 无装饰 */
text-decoration: underline;     /* 下划线 */
text-decoration: line-through;  /* 删除线 */
text-decoration: overline;      /* 上划线 */

/* 文本转换 */
text-transform: none;   /* 原始大小写 */
text-transform: uppercase; /* 全大写 */
text-transform: lowercase; /* 全小写 */
text-transform: capitalize; /* 首字母大写 */

/* 文字阴影 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

/* 文字溢出处理 */
white-space: nowrap;        /* 不换行 */
overflow: hidden;           /* 隐藏溢出 */
text-overflow: ellipsis;    /* 显示省略号 */

5. 盒模型（Box Model）

盒模型是CSS布局的核心概念。每个元素都被看作一个矩形盒子，由内容区、内边距、边框、外边距组成。

/* 盒模型图示：
+---------------------------+
|        外边距 (margin)     |
|  +---------------------+   |
|  |    边框 (border)     |   |
|  |  +-----------------+ |   |
|  |  | 内边距(padding) | |   |
|  |  |  +-----------+  | |   |
|  |  |  |  内容区    |  | |   |
|  |  |  |  (content) |  | |   |
|  |  |  +-----------+  | |   |
|  |  +-----------------+ |   |
|  +---------------------+   |
+---------------------------+
*/

5.1 尺寸属性

/* 宽度和高度 */
width: 200px;
height: 100px;
min-width: 100px;    /* 最小宽度 */
max-width: 800px;    /* 最大宽度 */
min-height: 100px;
max-height: 500px;

/* 盒模型类型 */
box-sizing: content-box;  /* 默认：宽高只包含内容 */
box-sizing: border-box;   /* 宽高包含内容+内边距+边框（推荐） */

5.2 内边距（Padding）

/* 上 右 下 左 */
padding: 10px 20px 10px 20px;
padding: 10px 20px;      /* 上下10px，左右20px */
padding: 10px;           /* 全部10px */

/* 单独设置 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

5.3 边框（Border）

/* border: 宽度 样式 颜色 */
border: 1px solid #ccc;
border: 2px dashed red;
border: 3px dotted blue;

/* 单独设置边框样式 */
border-width: 1px 2px 3px 4px;
border-style: solid dashed dotted double;
border-color: red blue green orange;

/* 圆角 */
border-radius: 10px;          /* 全部圆角 */
border-radius: 10px 20px;     /* 左上右下 右上左下 */
border-radius: 50%;            /* 圆形 */

/* 边框阴影 */
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
/* 参数：水平偏移 垂直偏移 模糊半径 颜色 */
box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.3);

5.4 外边距（Margin）

/* 语法同padding */
margin: 10px;
margin: 10px 20px;
margin: 10px auto;     /* 左右居中 */

/* 外边距合并问题 */
/* 相邻元素的上下margin会取最大值，不是相加 */

5.5 盒子背景

/* 背景颜色 */
background-color: #f5f5f5;

/* 背景图片 */
background-image: url('image.jpg');
background-size: cover;        /* 覆盖整个区域 */
background-size: contain;      /* 完全显示图片 */
background-position: center;   /* 居中 */
background-repeat: no-repeat;  /* 不重复 */
background-attachment: fixed;  /* 固定背景 */

/* 渐变背景 */
background: linear-gradient(45deg, #667eea, #764ba2);
background: radial-gradient(circle, #ff6b6b, #ee5a24);

/* 简写 */
background: #667eea url('image.jpg') no-repeat center/cover;

6. 显示模式与布局

6.1 display属性

值	特点	示例
block	独占一行，可设宽高	div, p, h1
inline	不换行，不可设宽高	span, a, strong
inline-block	不换行，可设宽高	img, button
none	隐藏元素（不占空间）	display: none
flex	弹性盒布局	现代布局首选
grid	网格布局	二维布局

6.2 浮动布局（Float）

/* 浮动（传统布局方式，现代逐渐被Flex取代） */
.float-left { float: left; }
.float-right { float: right; }

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

6.3 定位（Position）

/* 静态定位（默认） */
position: static;

/* 相对定位（相对于自身正常位置） */
position: relative;
top: 10px;
left: 20px;

/* 绝对定位（相对于最近已定位的父元素） */
position: absolute;
top: 0;
right: 0;

/* 固定定位（相对于视口） */
position: fixed;
bottom: 20px;
right: 20px;

/* 粘性定位（滚动到一定位置固定） */
position: sticky;
top: 0;

/* 定位常用属性 */
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10; /* 层级，数值越大越靠上 */

7. Flexbox弹性布局（重点）

Flexbox是目前最主流的一维布局方案，适用于导航栏、卡片网格、居中布局等场景。

7.1 容器属性

.container {
    display: flex; /* 或 inline-flex */

    /* 主轴方向 */
    flex-direction: row;          /* 水平（默认） */
    flex-direction: row-reverse;  /* 水平反向 */
    flex-direction: column;       /* 垂直 */
    flex-direction: column-reverse; /* 垂直反向 */

    /* 换行 */
    flex-wrap: nowrap;   /* 不换行（默认） */
    flex-wrap: wrap;     /* 换行 */
    flex-wrap: wrap-reverse;

    /* 主轴对齐（水平） */
    justify-content: flex-start;   /* 起始对齐 */
    justify-content: flex-end;     /* 末尾对齐 */
    justify-content: center;       /* 居中 */
    justify-content: space-between; /* 两端对齐 */
    justify-content: space-around; /* 均匀分布 */
    justify-content: space-evenly; /* 等距分布 */

    /* 交叉轴对齐（垂直） */
    align-items: stretch;    /* 拉伸（默认） */
    align-items: flex-start; /* 起始对齐 */
    align-items: flex-end;   /* 末尾对齐 */
    align-items: center;     /* 居中 */
    align-items: baseline;   /* 基线对齐 */

    /* 多行交叉轴对齐 */
    align-content: stretch;  /* 拉伸 */
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;

    /* 项目间距 */
    gap: 16px;        /* 行和列间距 */
    row-gap: 16px;    /* 行间距 */
    column-gap: 16px; /* 列间距 */
}

7.2 子项目属性

.item {
    /* 项目放大比例（默认为0） */
    flex-grow: 1;
    flex-grow: 2;  /* 占据多余空间的2倍 */

    /* 项目缩小比例（默认为1） */
    flex-shrink: 0;  /* 不缩小 */

    /* 项目基础宽度 */
    flex-basis: 200px;

    /* 简写 */
    flex: 1;           /* 1 1 0% */
    flex: 1 1 200px;   /* flex-grow flex-shrink flex-basis */

    /* 单个项目交叉轴对齐 */
    align-self: auto;
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: stretch;

    /* 项目排列顺序（数值越小越靠前） */
    order: 1;
    order: -1;  /* 排在前面 */
}

7.3 Flexbox典型布局示例

/* 水平居中 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 导航栏 */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

/* 卡片网格 */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card {
    flex: 1 1 280px;  /* 基础280px，自动换行 */
}

/* 等分布局 */
.equal {
    display: flex;
}
.equal > * {
    flex: 1;  /* 所有子元素等宽 */
}

8. Grid网格布局

Grid是二维布局方案，适合复杂页面布局。

8.1 容器属性

.container {
    display: grid;

    /* 列定义 */
    grid-template-columns: 200px 1fr 2fr;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    /* 行定义 */
    grid-template-rows: 100px auto 100px;

    /* 间距 */
    gap: 20px;

    /* 对齐 */
    justify-items: start;  /* 水平对齐 */
    align-items: center;   /* 垂直对齐 */

    /* 高级布局 */
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

8.2 子项目属性

.item {
    /* 跨列 */
    grid-column: 1 / 3;   /* 从第1列开始占2列 */
    grid-column: span 2;  /* 跨越2列 */

    /* 跨行 */
    grid-row: 1 / 3;      /* 从第1行开始占2行 */

    /* 使用grid-area */
    grid-area: header;    /* 对应模板中定义的区域 */
}

9. 响应式设计

9.1 媒体查询基础

/* 语法 */
@media 媒体类型 and (媒体条件) { /* CSS规则 */ }

/* 常用媒体类型 */
@media screen { ... }  /* 屏幕 */
@media print { ... }   /* 打印 */

/* 常用条件 */
@media (max-width: 768px) { ... }   /* 屏幕宽度小于768px */
@media (min-width: 769px) { ... }   /* 屏幕宽度大于769px */
@media (orientation: portrait) { ... }  /* 竖屏 */
@media (orientation: landscape) { ... } /* 横屏 */
@media (prefers-color-scheme: dark) { ... } /* 深色模式 */

9.2 响应式断点设计

/* 移动优先（推荐） */
/* 默认是手机样式 */
.container { padding: 16px; }

/* 平板 */
@media (min-width: 768px) {
    .container { padding: 32px; }
}

/* 桌面 */
@media (min-width: 1024px) {
    .container { padding: 48px; max-width: 1200px; }
}

/* 大屏 */
@media (min-width: 1440px) {
    .container { padding: 64px; max-width: 1400px; }
}

9.3 响应式单位

/* 相对单位 */
em      /* 相对于父元素的字体大小 */
rem     /* 相对于根元素(html)的字体大小 */
%       /* 相对于父元素的百分比 */
vw      /* 视口宽度的1% */
vh      /* 视口高度的1% */
vmin    /* 视口宽高中较小值的1% */
vmax    /* 视口宽高中较大值的1% */

/* 使用建议 */
html { font-size: 16px; }
h1 { font-size: 2rem; }    /* 32px */
p { font-size: 1rem; }      /* 16px */
.container { width: 90%; max-width: 1200px; }

10. CSS变量（Custom Properties）

/* 定义变量 */
:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --font-size-base: 16px;
    --spacing: 16px;
    --border-radius: 8px;
}

/* 使用变量 */
.button {
    background-color: var(--primary-color);
    padding: var(--spacing);
    border-radius: var(--border-radius);
}

/* 变量备用值 */
.color {
    color: var(--text-color, #333);
}

/* 在媒体查询中更新 */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #4a5fc1;
        --bg-color: #1a1a2e;
    }
}

11. 过渡与动画

11.1 过渡（Transition）

.box {
    width: 100px;
    height: 100px;
    background: blue;
    transition: all 0.3s ease;
    /* transition: 属性 时长 缓动函数 延迟; */
}

.box:hover {
    width: 200px;
    height: 200px;
    background: red;
}

/* 缓动函数 */
transition: all 0.3s ease;       /* 缓出缓入 */
transition: all 0.3s ease-in;    /* 缓入 */
transition: all 0.3s ease-out;   /* 缓出 */
transition: all 0.3s ease-in-out; /* 缓出缓入 */
transition: all 0.3s linear;     /* 线性 */

11.2 关键帧动画（Keyframes）

/* 定义动画 */
@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(10%);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 使用动画 */
.animated {
    animation: slideIn 0.8s ease-out forwards;
    /* 动画名 时长 缓动 填充模式 */
}

.spinner {
    animation: spin 2s linear infinite;
    /* 无限循环 */
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

12. 常用样式技巧

12.1 居中技巧汇总

/* 1. Flexbox居中（推荐） */
.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Grid居中 */
.center-grid {
    display: grid;
    place-items: center;
}

/* 3. 绝对定位居中 */
.center-absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 4. 文字居中 */
.text-center { text-align: center; }

/* 5. margin居中（块级元素） */
.block-center {
    width: 200px;
    margin: 0 auto;
}

12.2 三角形（CSS绘图）

.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
}

12.3 卡片阴影效果

.card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}

12.4 渐变文字

.gradient-text {
    background: linear-gradient(45deg, #f093fb, #f5576c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

13. 重置样式（CSS Reset）

/* 基础的CSS重置，消除浏览器默认差异 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, textarea, select {
    font: inherit;
    border: none;
    outline: none;
}

14. 实战：完整页面样式示例

/* 完整的企业官网样式 */
:root {
    --primary: #667eea;
    --primary-dark: #5a67d8;
    --secondary: #764ba2;
    --text: #333;
    --text-light: #666;
    --bg-light: #f8f9fa;
    --white: #fff;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
}

/* 容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 导航栏 */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
}
.nav-links a {
    text-decoration: none;
    color: var(--text);
    transition: color 0.3s;
}
.nav-links a:hover {
    color: var(--primary);
}

/* 按钮 */
.btn {
    display: inline-block;
    padding: 12px 28px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* 首屏 */
.hero {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 60px 0;
    min-height: 70vh;
}
.hero-content { flex: 1; }
.hero-content h1 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
}
.hero-content p {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 30px;
}
.hero-image { flex: 1; }

/* 卡片网格 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 40px 0;
}
.card {
    background: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--text-light); }

/* 页脚 */
.footer {
    background: #1a1a2e;
    color: white;
    padding: 40px 0;
    text-align: center;
}
.footer a { color: var(--primary); }

/* 响应式 */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 40px 0;
    }
    .hero-content h1 {
        font-size: 32px;
    }
    .nav-links {
        display: none; /* 实际项目需要汉堡菜单 */
    }
    .grid {
        grid-template-columns: 1fr;
    }
}

15. 总结与学习资源

恭喜你完成了CSS基础知识的系统学习！你已经掌握了：
✅ CSS的三种引入方式和基本语法
✅ 各类选择器及其优先级
✅ 盒模型与尺寸控制
✅ Flexbox和Grid现代布局
✅ 响应式设计与媒体查询
✅ CSS变量、过渡和动画

推荐学习资源：
🔹 MDN CSS文档：developer.mozilla.org/zh-CN/docs/Web/CSS
🔹 CSS Tricks：css-tricks.com
🔹 Flexbox Froggy（游戏学习）：flexboxfroggy.com
🔹 Grid Garden（游戏学习）：cssgridgarden.com

最后的建议：CSS是一门“做中学”的技术，看得再多不如动手写一遍。建议用Flexbox和Grid重新布局一个你喜欢的网站首页，在实践中巩固知识点。善用浏览器开发者工具（F12），实时调试样式能极大提升学习效率。祝你学习顺利！