4.3 CSS 基础：样式与布局，以及 Tailwind 是什么

一、本节你会做出什么

你会把 4.2 那个丑页面装修成能看的样子，并且拿到一张对照表——让你以后说得出「我想要什么样」，而不是只会说「不好看」。

📷 效果位：同一个页面装修前后对比

这一节的实用目标很具体：样式是你和 AI 来回最多的地方。 做功能可能一次就对，调样式常常要来回五六轮。本节就是把这个来回次数压下来。

---

二、开始前你需要

• 已完成 4.2，手上有那个 index.html，且知道 class 是干什么的
• 浏览器开发者工具能打开

---

三、跟着做

第 1 步：CSS 的形状

CSS 的每一条规则都是这个形状：

h1 {
  color: #c2410c;
  font-size: 32px;
}

  h1  {  color  :  #c2410c  ;  }
  ↑         ↑          ↑
选择器     属性        值
（改谁）  （改什么）  （改成啥）

读出来就是：“所有 h1，字体颜色改成这个橙色，字号 32 像素。”

选择器（改谁）主要三种：

写法	选中谁	例子
h1	所有这个标签	h1 { } 所有一级标题
.card	所有 class 叫 card 的（注意前面有个点）	.card { }
#header	id 叫 header 的那一个	#header { }

🔑 . 代表 class。这个点是 4.2 那个 class 属性和 CSS 之间的接头。

第 2 步：CSS 写在哪里（三种，你主要见到第三种）

写法	长什么样	什么时候见到
行内	<h1 style="color: red">	AI 偶尔用来快速试效果
内部	<style> 标签写在 head 里	单文件小页面
外部	单独的 .css 文件，用 <link> 引进来	真实项目的标准做法

💡 4.1 定位表里那条「样式全没了，像纯文本」，说的就是第三种：外部 CSS 文件没加载上（404）。内容在，装修没来。

第 3 步：你会反复改的 8 类属性

不用背，认得 + 知道怎么说就够了。

想改什么	属性	例子
文字颜色	color	color: #333
背景色	background-color	background-color: #fff7ed
字号	font-size	font-size: 18px
字重（粗细）	font-weight	font-weight: bold
内边距	padding	padding: 16px
外边距	margin	margin: 24px
圆角	border-radius	border-radius: 12px
阴影	box-shadow	box-shadow: 0 2px 8px rgba(0,0,0,.1)

⚠️ padding 和 margin 的区别——这是零基础第一大困惑

必须现在搞清楚，否则后面每次调间距都在猜。

        ┌─ margin（外边距：盒子和别人之间的距离）
        │
    ┌───┴──────────────────────────┐
    │   border（边框）               │
    │  ┌────────────────────────┐  │
    │  │  padding（内边距：      │  │
    │  │   边框和内容之间的距离）  │  │
    │  │   ┌────────────────┐   │  │
    │  │   │    内容         │   │  │
    │  │   └────────────────┘   │  │
    │  └────────────────────────┘  │
    └──────────────────────────────┘

这就是盒模型——网页上每个元素都是这样一个盒子。

	padding（内边距）	margin（外边距）
在哪	边框里面	边框外面
撑大什么	盒子自己变大	盒子不变，和邻居的距离变大
快递盒类比	盒子里的泡沫填充	这个盒子和旁边盒子的间隔
什么时候用	「文字贴着边框太挤了」	「这两块离得太近了」

🔑 一句话判断：挤在里面 → padding；挨得太近 → margin。

记住这一条，你就能把「这里看着挤」升级成「卡片的 padding 太小了，文字贴边」——AI 一次就改对。

第 4 步：布局——Flex 和 Grid 什么时候用哪个

布局占了样式问题的一大半。好消息是，现代布局只需要认得两个词。

Flex：把一堆东西排成一行（或一列）

.nav {
  display: flex;        /* 开启 flex，子元素默认横着排 */
  gap: 24px;            /* 元素之间留 24px 间隔 */
  align-items: center;  /* 垂直居中对齐 */
}

什么时候用 Flex：一维排列——东西排成一条线。

• 导航栏（logo 在左、菜单在右）
• 按钮并排
• 图标 + 文字 并排且垂直居中

三个你会用到的说法：

想要的效果	对应属性
横着排 / 竖着排	flex-direction: row / column
两端对齐，中间留空	justify-content: space-between
垂直居中	align-items: center

Grid：摆成网格

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 三列等宽 */
  gap: 24px;
}

什么时候用 Grid：二维排列——有行有列的方阵。

• 景点卡片 3×2 排列（第 5.4 节就是这个）
• 相册
• 仪表盘面板

🔑 判断口诀： 一条线 → Flex；一个方阵 → Grid。

拿不准？直接跟 AI 说你要的效果（“六张卡片排成三列两行，间距均匀”），让它选。这正是 3.5 讲的「描述结果，不要指挥做法」。

居中——问得最多的一件事

「怎么让它居中」其实有三种不同的需求，说清是哪一种，AI 才不会改错：

你想要的	准确说法
文字在盒子里居中	「文字水平居中」（text-align: center）
整个盒子在页面中间	「这个容器水平居中，最大宽度 1200px」
东西在盒子里上下左右都居中	「在容器内水平和垂直都居中」

第 5 步：响应式——手机上为什么会乱

同一个页面要在手机和电脑上都好看，靠的是断点：屏幕宽度小于某个值时，换一套样式。

/* 默认：手机上一列 */
.cards { grid-template-columns: 1fr; }

/* 屏幕宽于 768px（平板及以上）：两列 */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* 屏幕宽于 1024px（电脑）：三列 */
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

两个你要知道的常识：

1. 移动优先：先写手机的样式，再用断点往大屏加。这是现在的标准做法，AI 默认也这么写。
2. 常见断点：768px（平板）、1024px（电脑）。记不住没关系，说“手机 / 平板 / 电脑”AI 就懂。

💡 怎么在电脑上测手机效果：开发者工具里有个手机图标（Ctrl/Cmd+Shift+M），点一下切换到手机模式。3.5 的“操作验收”里那条「把窗口拖窄」就是在干这件事，这是更正规的做法。

📷 截图位 1：开发者工具的手机模式，同一页面在手机宽度下的样子

第 6 步：Tailwind 是什么——为什么 AI 代码里全是奇怪的 class

你打开 AI 生成的项目，会看到这种东西：

<h1 class="text-3xl font-bold text-gray-800 mb-4">遇见成都</h1>

这不是乱码。这是 Tailwind CSS。

它的思路是：把每一条 CSS 规则，变成一个 class 名字。 对照着看就懂了：

Tailwind class	等价的 CSS	中文
text-3xl	font-size: 1.875rem	字号大
font-bold	font-weight: 700	加粗
text-gray-800	color: #1f2937	深灰字
bg-white	background-color: #fff	白底
p-4	padding: 1rem	内边距 16px
mb-4	margin-bottom: 1rem	下外边距 16px
rounded-lg	border-radius: 0.5rem	圆角
shadow-md	box-shadow: ...	中等阴影
flex	display: flex	开启 flex
gap-6	gap: 1.5rem	间隔 24px

三条够用的规律：

规律	说明
数字是倍数	p-1 p-2 p-4 p-8 依次变大（1 = 4px，所以 p-4 = 16px）
m 是 margin，p 是 padding	后面加方向：mt=上、mb=下、ml=左、mr=右、mx=左右、my=上下
md: lg: 前缀 = 断点	grid-cols-1 md:grid-cols-2 lg:grid-cols-3 就是第 5 步那三段响应式

为什么本课用 Tailwind（AI 也默认用它）：

• 不用在 HTML 和 CSS 文件之间来回跳，改样式就在元素上改
• 不用给每个元素起 class 名字（card-title-wrapper-inner 这种命名地狱）
• 对 AI 特别友好：改样式是改一个字符串，不用动两个文件

🔑 你需要做到的程度：看到 class="flex items-center gap-4 p-6 rounded-xl shadow-sm"，能读出“这是个横向排列、垂直居中、有间隔、有内边距、圆角、浅阴影的盒子”。读得出就够了，不用会写。

第 7 步：动手——给 4.2 的页面装修

打开 4.2 那个 index.html，在 </head> 前面加上这一段：

<style>
  body {
    font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
    line-height: 1.8;
    color: #333;
  }

  header {
    border-bottom: 2px solid #c2410c;
    padding-bottom: 16px;
    margin-bottom: 32px;
  }

  h1 { color: #c2410c; font-size: 32px; }

  nav { display: flex; gap: 24px; }

  nav a { color: #c2410c; text-decoration: none; }

  ul { background: #fff7ed; padding: 16px 16px 16px 36px; border-radius: 12px; }

  button {
    background: #c2410c;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
  }

  footer {
    margin-top: 48px;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 14px;
  }
</style>

保存，刷新浏览器。同一个 HTML，完全变了一个样子。

📷 截图位 2：装修后的页面

现在改三处，体会一下因果：

1. 把 max-width: 720px 改成 1200px → 内容变宽了
2. 把 margin: 0 auto 里的 auto 改成 0 → 整个页面跑到左边去了（auto 就是“水平居中”的秘密）
3. 把 button 的 padding: 12px 24px 改成 4px 8px → 按钮变小了，这就是 padding 在撑大盒子

第 8 步：对照表（本节交付物）

把“不好看”翻译成 AI 能执行的话。 这张表存下来，第 5 章会一直用。

❌ 你本来会说	✅ 改成这样说
「这里看着挤」	「卡片的 padding 太小，文字贴着边框了，调到 24px」
「这两块离太近」	「这两个区块之间的 margin 加大到 48px」
「字太小」	「正文字号从 14px 调到 16px，行高调到 1.8」
「不好看，改一下」	「卡片加 12px 圆角和一层浅阴影，鼠标悬停时阴影加深、上浮 4px」
「排得乱」	「这六张卡片排成网格：手机一列、平板两列、电脑三列，间距 24px」
「让它居中」	「这个容器水平居中，最大宽度 1200px」（说清是哪种居中！）
「手机上乱了」	「在 375px 宽度下，【哪个元素】横向溢出了 / 和【谁】重叠了」
「颜色不对」	「主色统一用 #c2410c，正文用深灰 #333，辅助文字用 #999」

三条说法技巧：

1. 给参照物：「和上面那个区块的间距保持一致」比随便报一个数字好——你本来也不知道该多少。
2. 说清范围：「只改这个卡片，不要动其他区块」（3.5 的「不要做什么」在样式上尤其重要，AI 很容易顺手统一改全站）。
3. 用截图：3.3 讲过——把你想要的效果截图丢给它，比一千字描述管用。

---

四、完成的标志是

• 我知道 CSS 规则的形状：选择器 + 属性 + 值
• 我知道 .card 里那个点代表 class
• 我能说清 padding 和 margin 的区别（挤在里面 / 挨得太近）
• 我能说出盒模型的四层（内容 / padding / border / margin）
• 我知道「一条线用 Flex，一个方阵用 Grid」
• 我知道「居中」有三种，要说清是哪一种
• 我知道响应式靠断点，且现在流行移动优先
• 我会用开发者工具的手机模式看手机效果
• 我看得懂 class="flex items-center gap-4 p-6 rounded-xl" 大概在说什么
• 我知道 Tailwind 里 p-4 是 padding、mb-4 是下外边距、md: 是断点前缀
• 我给 index.html 加上了样式，并改了三处看到了变化
• 我存好了第 8 步那张对照表

---

五、卡住了看这里

Q：我加了 <style>，但样式没生效。 按顺序查：① <style> 是不是放在 <head> 里面；② 选择器写对没——class 前面要有点（.card 不是 card）；③ 大括号、分号有没有漏；④ 强制刷新 Cmd/Ctrl+Shift+R。

Q：我改了某个元素的样式，但页面上没反应。 很可能被别的规则覆盖了。CSS 有优先级：行内 > id > class > 标签，同级别的后写的赢。用开发者工具的 Styles 面板看——被覆盖的规则会显示成带删除线的，一眼就能看出来（4.10 细讲）。

Q：我想改一个元素，但不知道它的 class 叫什么。 用 4.2 第 7 步那招：开发者工具 → 元素选择器（箭头图标）→ 点页面上那个元素 → Elements 面板里就显示出它的标签和 class 了。复制那个 class 名直接告诉 AI。

Q：元素跑出屏幕了 / 手机上有横向滚动条。 最常见三个原因：① 某个元素设了固定宽度（width: 1200px）没做响应式；② 图片没限制最大宽度；③ padding 加在了固定宽度的元素上，撑爆了。把症状和开发者工具手机模式的截图一起给 AI。

Q：Tailwind 那些 class 我要背吗？ 完全不用。 两个实用做法：① 看不懂的直接问 AI「shadow-sm ring-1 ring-black/5 是什么效果」；② 想要某个效果不知道 class 叫什么，直接说中文需求让 AI 写。你只需要能大致读懂它写了什么。

Q：我的项目里既有 Tailwind class 又有 css 文件，正常吗？ 正常。Tailwind 管绝大多数样式，少量全局样式（字体、滚动条、特殊动画）还是写在 css 文件里。本课网站自己就是这么做的。

---

六、本节提示词

① 翻译一串 Tailwind class：

我在项目里看到这段 class，不知道是什么效果：
【粘贴 class 字符串】

请用中文逐个解释，并在最后用一句话总结"这个元素整体长什么样"。
如果里面有响应式前缀（md: lg: 之类），说明在不同屏幕下分别是什么效果。

② 精确描述样式修改（配合第 8 步的对照表）：

我要调整样式。

**元素**：【class 名或页面位置，比如"class 为 attraction-card 的卡片"】
**现在的问题**：【具体，比如"文字贴着边框，看着挤"】
**我想要的效果**：【具体，比如"文字和边框之间留出 24px"】
**参照物**：【可选，比如"和页面上方的介绍区块保持一致的间距"】

要求：
1. 只改这个元素，不要动页面其他部分；
2. 改完告诉我你改了哪几个 class / 哪几行；
3. 如果这个改动在手机上会有问题，先提醒我。

③ 响应式体检（页面做完必做一次）：

请检查我的页面在手机上的表现。

要检查的页面文件：【@文件名】

逐项告诉我：
1. 有没有元素会横向溢出、导致手机上出现左右滚动？
2. 有没有固定宽度（px）没做响应式处理的地方？
3. 图片有没有限制最大宽度？
4. 在 375px 宽度下，有没有元素会重叠或被挤变形？
5. 字号在手机上会不会太小（小于 14px）？

有问题的直接告诉我在哪一行，并给出修改方案。**先不要改代码**，我确认后再动手。

---

上一节 ← 4.2 HTML 基础 下一节 → 4.4 JavaScript 基础：让页面动起来