全栈开发学习系列
阶段一（编程基础）8/8篇 ✅ 完结
—— 阶段二：Web 全栈 ——
09 HTML 基础：网页骨架与语义化标签 ✅
10 CSS 基础：样式、布局与响应式（当前篇）
11 JavaScript 基础：变量、DOM 与事件
12 HTTP 协议基础：请求、响应与状态码
13 FastAPI 入门：构建第一个 RESTful API
14 PostgreSQL 基础：数据库设计与 SQL 操作
15 认证授权：JWT、Session 与 Cookie
16 综合实战：带登录的博客系统
CSS 基础：样式、布局与响应式
从朴素文本到专业页面，掌握网页样式与布局的核心技能
基础篇CSSFlex 布局
读完本篇你将能
用三种方式将 CSS 引入 HTML 页面，使用元素/类/ID/伪类选择器精准定位元素，理解盒模型并正确计算元素尺寸，掌握文本与颜色样式属性，用 Flex 布局实现水平/垂直排列，编写响应式页面适配不同屏幕，为上一篇的个人主页添加完整样式。
目录
01 从毛坯房到精装修：CSS 入门
02 CSS 选择器：精准定位元素
03 盒模型：元素的尺寸密码
04 文本与颜色：页面的妆容
05 Flex 布局：一维排列之王
06 响应式设计：适配所有屏幕
07 实战：精装修个人主页
08 动手练习
01 从毛坯房到精装修：CSS 入门
上一篇你用 HTML 搭建了个人主页的骨架——结构完整但毫无样式：默认黑色字体、左对齐文本、蓝色下划线链接。就像拿到一套毛坯房，户型是对的，但水泥墙面裸露、没有地板、没有灯具。
CSS（Cascading Style Sheets，层叠样式表）就是精装修：刷墙、铺地板、装灯具、摆家具。HTML 定义“是什么”，CSS 定义“长什么样”。
层叠的含义：当多条规则同时作用于同一元素时，浏览器按优先级叠加应用样式。
CSS 三种引入方式
1. 内联样式：在 HTML 元素的 style 属性中直接写 CSS
2. 内部样式表：在 <head> 中的 <style> 标签内写 CSS
3. 外部样式表：在单独的 .css 文件中写 CSS，用 <link> 引入
html
<!-- 方式一：内联样式 -->
<p style="color: red;">红色文字</p>
<!-- 方式二：内部样式表 -->
<style>
p { color: blue; }
</style>
<!-- 方式三：外部样式表 -->
<link rel="stylesheet" href="style.css">
小贴士
实际开发中 99% 使用外部样式表。原因：HTML 和 CSS 分离便于维护，同一个 .css 文件可以被多个页面复用，浏览器会缓存外部文件加快加载速度。
02 CSS 选择器：精准定位元素
你知道了 CSS 可以给元素加样式，但页面上有几十个 <p> 标签，怎么只给其中某个加样式？这就需要选择器——告诉浏览器“选中哪些元素”。
比喻：装修工人拿着设计图，图上标注“主卧刷浅蓝、次卧刷米黄、客厅铺木地板”。选择器就是这些标注。
基本选择器
| 选择器类型 | 语法 | 示例 | 选中范围 |
|---|
| 元素选择器 | 标签名 {} | p {} | 所有 <p> 元素 |
| 类选择器 | .类名 {} | .card {} | class="card" 的元素 |
| ID 选择器 | #ID名 {} | #header {} | id="header" 的元素（唯一） |
组合选择器
后代选择器：.nav a {} — 选中 .nav 内部所有 <a>（不管嵌套多深）
子元素选择器：.nav > a {} — 只选中 .nav 直接子级的 <a>
伪类选择器：a:hover {} — 鼠标悬停时的 <a>
css
| 1 | /* 元素选择器：所有段落 */ |
| 2 | p { |
| 3 | color: #333333; |
| 4 | line-height: 1.8; |
| 5 | } |
| 6 | |
| 7 | /* 类选择器：导航链接 */ |
| 8 | .nav-link { |
| 9 | color: #c026d3; |
| 10 | text-decoration: none; |
| 11 | } |
| 12 | |
| 13 | /* ID 选择器：页面主标题 */ |
| 14 | #main-title { |
| 15 | font-size: 32px; |
| 16 | font-weight: bold; |
| 17 | } |
| 18 | |
| 19 | /* 后代选择器：导航栏内的链接 */ |
| 20 | .nav a { |
| 21 | padding: 8px 16px; |
| 22 | } |
| 23 | |
| 24 | /* 伪类选择器：鼠标悬停 */ |
| 25 | .nav-link:hover { |
| 26 | color: #a21caf; |
| 27 | } |
小贴士
类选择器是最常用的选择器。一个元素可以有多个类（class="card active"），一个类可以应用于多个元素。ID 选择器唯一性约束更强，适合标识页面上独一无二的元素（如 #header、#footer）。
03 盒模型：元素的尺寸密码
选择器解决了“给谁加样式”的问题，盒模型解决“元素占多大空间”的问题。
每个 HTML 元素都是一个矩形盒子，从内到外有四层结构：
1. content（内容）：文字、图片等实际内容
2. padding（内边距）：内容到边框的留白
3. border（边框）：元素的边框线
4. margin（外边距）：元素与其他元素之间的间距
关键属性 box-sizing
content-box（默认）：width 只包含 content，加上 padding 和 border 后实际更宽
border-box：width 包含 content + padding + border，设置多少就是多少
常见错误
width: 200px; padding: 20px; — 实际宽度 240px
box-sizing: border-box; width: 200px; padding: 20px; — 实际宽度 200px
css
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid #c026d3;
margin: 16px;
}
小贴士
在项目初始化时，用通配符选择器 * 给所有元素设置 box-sizing: border-box，可以避免 90% 的尺寸计算错误。这是前端开发的事实标准做法。
04 文本与颜色：页面的妆容
盒模型搞定了空间尺寸，现在来给内容本身做造型——文字大小、颜色、对齐方式、背景色。
文本相关属性
color：文字颜色
font-size：字号（推荐 px 或 rem）
font-weight：字重（normal / bold / 400 / 700）
line-height：行高（推荐 1.5-1.8 倍字号）
text-align：对齐方式（left / center / right）
text-decoration：下划线（none / underline）
颜色表示法
| 表示法 | 格式 | 示例 | 适用场景 |
|---|
| HEX | #RRGGBB | #c026d3 | 最常用 |
| RGB | rgb(r,g,b) | rgb(192,38,211) | 需要计算颜色值时 |
| RGBA | rgba(r,g,b,a) | rgba(192,38,211,0.5) | 需要半透明时 |
css
| 1 | body { |
| 2 | color: #333333; |
| 3 | font-size: 16px; |
| 4 | line-height: 1.8; |
| 5 | background-color: #ffffff; |
| 6 | } |
| 7 | |
| 8 | h1 { |
| 9 | color: #c026d3; |
| 10 | font-size: 32px; |
| 11 | font-weight: bold; |
| 12 | text-align: center; |
| 13 | } |
| 14 | |
| 15 | a { |
| 16 | color: #c026d3; |
| 17 | text-decoration: none; |
| 18 | } |
| 19 | |
| 20 | .card { |
| 21 | background-color: #f5d0fe; |
| 22 | border: 1px solid #c026d3; |
| 23 | border-radius: 8px; |
| 24 | padding: 20px; |
| 25 | } |
05 Flex 布局：一维排列之王
文本和颜色让页面变好看了，但元素还是从上到下堆叠——导航栏没法水平排列，卡片没法并排展示。CSS 布局解决这个问题。
历史背景：以前用 float 和 position 做布局，代码复杂、容易出错。2013 年 Flex 布局成为标准，一维排列变得极其简单。
Flex 的核心概念：给父元素设置 display: flex，它就变成“弹性容器”，子元素自动变成“弹性项目”，可以水平或垂直排列。
容器属性
| 属性 | 可选值 | 作用 |
|---|
| flex-direction | row / column | 主轴方向（水平/垂直） |
| justify-content | flex-start / center / space-between / space-around | 主轴对齐方式 |
| align-items | flex-start / center / stretch | 交叉轴对齐方式 |
| flex-wrap | nowrap / wrap | 是否换行 |
子元素属性
flex: 1 — 自动填充剩余空间
flex-shrink: 0 — 不缩小
css
| 1 | /* 导航栏：水平均匀排列 */ |
| 2 | .nav { |
| 3 | display: flex; |
| 4 | justify-content: space-between; |
| 5 | align-items: center; |
| 6 | padding: 16px 24px; |
| 7 | } |
| 8 | |
| 9 | /* 导航链接组 */ |
| 10 | .nav-links { |
| 11 | display: flex; |
| 12 | gap: 16px; |
| 13 | } |
| 14 | |
| 15 | /* 卡片网格：自动换行 */ |
| 16 | .card-grid { |
| 17 | display: flex; |
| 18 | flex-wrap: wrap; |
| 19 | } |
| 20 | |
| 21 | .card-item { |
| 22 | flex: 1 1 calc(33.33% - 16px); |
| 23 | margin: 8px; |
| 24 | } |
常见错误
用 float: left 做布局 — 需要清除浮动、容易塌陷
用 display: flex — 一行代码搞定对齐和分布
小贴士
gap 属性在 Flex 布局中可以设置子元素间距（gap: 16px），比用 margin 更简洁。但旧版浏览器可能不支持，生产环境可用 margin 替代。
06 响应式设计：适配所有屏幕
Flex 布局解决了排列问题，但手机屏幕 375px、平板 768px、电脑 1920px——同一页面怎么适配所有宽度？
第一步：viewport meta 标签
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
没有这行代码，手机浏览器会把页面按 980px 宽度渲染再缩小，导致文字极小。
第二步：相对单位 + max-width
用百分比宽度代替固定像素：width: 100%
用 max-width 限制最大宽度：max-width: 1200px
图片自适应：img { max-width: 100%; height: auto; }
第三步：媒体查询 @media
css
| 1 | /* 默认样式（移动端优先） */ |
| 2 | .card-grid { |
| 3 | display: flex; |
| 4 | flex-direction: column; |
| 5 | } |
| 6 | |
| 7 | /* 平板：768px 以上变两列 */ |
| 8 | @media (min-width: 768px) { |
| 9 | .card-grid { |
| 10 | flex-direction: row; |
| 11 | flex-wrap: wrap; |
| 12 | } |
| 13 | .card-item { |
| 14 | flex: 1 1 calc(50% - 16px); |
| 15 | } |
| 16 | } |
| 17 | |
| 18 | /* 桌面：1024px 以上变三列 */ |
| 19 | @media (min-width: 1024px) { |
| 20 | .card-item { |
| 21 | flex: 1 1 calc(33.33% - 16px); |
| 22 | } |
| 23 | } |
移动端优先策略：先写移动端样式（最简单），再用 @media (min-width: ...) 逐步增强大屏体验。这比“桌面优先再降级”更高效。
小贴士
在 macOS 上用 Chrome DevTools 测试响应式：右键检查 → 切换设备工具栏（Cmd+Shift+M），可以选择 iPhone/iPad 等设备预设，实时查看不同屏幕下的效果。
07 实战：精装修个人主页
现在把前六节的知识综合起来，给上一篇的个人主页穿上 CSS 外衣。
css
| 1 | /* 全局重置 */ |
| 2 | * { |
| 3 | margin: 0; |
| 4 | padding: 0; |
| 5 | box-sizing: border-box; |
| 6 | } |
| 7 | body { |
| 8 | font-family: sans-serif; |
| 9 | color: #333333; |
| 10 | line-height: 1.8; |
| 11 | background-color: #f9fafb; |
| 12 | } |
| 13 | /* 头部导航 */ |
| 14 | .nav { |
| 15 | display: flex; |
| 16 | justify-content: space-between; |
| 17 | align-items: center; |
| 18 | padding: 16px 24px; |
| 19 | background-color: #ffffff; |
| 20 | border-bottom: 1px solid #e5e7eb; |
| 21 | } |
| 22 | .nav-links { |
| 23 | display: flex; |
| 24 | gap: 24px; |
| 25 | } |
| 26 | .nav-link { |
| 27 | color: #333333; |
| 28 | text-decoration: none; |
| 29 | } |
| 30 | .nav-link:hover { |
| 31 | color: #c026d3; |
| 32 | } |
| 33 | /* 主内容区 */ |
| 34 | main { |
| 35 | max-width: 1200px; |
| 36 | margin: 0 auto; |
| 37 | padding: 40px 24px; |
| 38 | } |
| 39 | /* 卡片样式 */ |
| 40 | .card { |
| 41 | background-color: #ffffff; |
| 42 | border: 1px solid #e5e7eb; |
| 43 | border-radius: 8px; |
| 44 | padding: 24px; |
| 45 | margin-bottom: 24px; |
| 46 | } |
| 47 | footer { |
| 48 | text-align: center; |
| 49 | padding: 24px; |
| 50 | color: #999999; |
| 51 | } |
| 52 | /* 响应式：移动端导航垂直 */ |
| 53 | @media (max-width: 768px) { |
| 54 | .nav { |
| 55 | flex-direction: column; |
| 56 | gap: 12px; |
| 57 | } |
| 58 | .nav-links { |
| 59 | flex-direction: column; |
| 60 | align-items: center; |
| 61 | } |
| 62 | } |
这段 CSS 做了什么——全局重置避免盒模型问题，Flex 布局让导航栏水平排列，卡片样式用 border-radius 和 padding 做出圆角留白，媒体查询让导航在窄屏幕下垂直堆叠。
把这段 CSS 保存为 style.css，与上一篇的 HTML 文件放在同一目录，在 HTML 的 <head> 中加上 <link rel="stylesheet" href="style.css">，刷新浏览器就能看到效果。
08 动手练习
🟢 基础验证
创建一个 HTML 文件，包含一个 h1 和一个 p。编写外部 CSS 文件，将 h1 设为品红色（#c026d3）、居中、32px，将 p 设为深灰色（#333333）、16px、行高 1.8。用 <link> 引入 CSS 文件。
🟡 组合应用
用 Flex 布局实现一个水平导航栏。要求：导航栏包含 logo（左侧）和 4 个链接（右侧均匀分布），链接在鼠标悬停时变色，整个导航栏有底部边框线。提示：用 justify-content: space-between 让 logo 和链接组分居两端。
🔴 开放挑战
实现一个响应式卡片网格。要求：桌面端 3 列、平板 2 列、手机 1 列；每张卡片有圆角边框、内边距、阴影效果；卡片内包含标题、描述文本和一个按钮。提示：综合使用 Flex + flex-wrap + 媒体查询 + box-shadow。
知识回顾
CSS 引入方式选择器优先级盒模型box-sizing文本样式Flex 布局justify-content响应式设计媒体查询移动端优先
下一篇预告
11 JavaScript 基础：变量、DOM 与事件
CSS 让页面变好看了，但它还是静止的——下一篇学习 JavaScript，让网页能响应用户的点击和输入，从静态页面进化为交互式应用。