CSS 进阶（四）

本页对应 CSS 进阶，共 7 段视频，约 49 分钟。

学习目标

• 能够识别并列举常见的行内块元素，说明其“一行可放多个、可设置宽高、尺寸由内容撑开”的特点。
• 能够使用 display: block、display: inline、display: inline-block 完成元素显示模式转换，并判断转换后宽高与排列效果。
• 能够使用后代选择器结合 display: block 完成“热词导航”案例，实现链接宽高、背景色及纵向排列效果。
• 能够根据效果图拆解 banner 案例结构，使用背景复合属性设置背景颜色、背景图片、不平铺及左下角定位。
• 能够利用父级 text-align 的继承控制行内或行内块子元素右对齐，并使用 inline-block 实现带宽高链接的右侧布局。
• 能够说明块级元素中 text-align 对行内/行内块元素与块级子元素的不同控制效果，并据此选择正确布局方式。

知识点

案例目标与结构分析

为什么需要：这个案例要把背景图、文字对齐、继承、显示模式转换放在一个真实广告条里练熟。
怎么想：先看整体是一个大盒子 .banner，背景图直接作为盒子背景；里面放标题 h2、说明 p、链接 a。不要一上来写细节，先确定“大盒子包三个内容”。
怎么做：用 div.banner 包住 h2、p、a，大盒子负责背景和整体文字方向，子元素负责各自字号、颜色、宽高。
易错点：大盒子一般用 div，不要用 p 当布局容器；背景图不写成 <img>，因为这里它是装饰性背景，位置要固定在左下角。

背景图与盒子尺寸

为什么需要：banner 的视觉主体是左侧图片和灰色底，必须先让盒子有高度和背景。
怎么想：盒子宽度不写时，块级元素默认和浏览器一样宽；高度明确给 500px。背景图要取消平铺，并定位到左下角。
怎么做：给 .banner 设置 height:500px、background-color:#f3f3f4、background-image:url(./images/bk.png)、background-repeat:no-repeat、background-position:left bottom。
易错点：背景图路径写错会看不到图；不写 no-repeat 可能重复；left bottom 才是左下角，不要写成 bottom left 以外想当然的值。转写稿中也提到可先用背景复合属性练习，但本案例保留分写更清楚。

文字右对齐与继承

为什么需要：标题、说明、按钮都要靠右，如果分别写三遍 text-align:right 会重复。
怎么想：text-align 和 color 都可以继承。给父级 .banner 加一次，子级就能继承文字对齐和颜色。
怎么做：在 .banner 中写 text-align:right; color:#333;。这样 h2、p 内文字右对齐，颜色也继承；链接颜色特殊，后面单独设白色。
易错点：父级 text-align:right 主要控制行内内容/行内块的位置和文字对齐；如果链接被转成 block，它会独占一行，不能靠父级 text-align 放到右侧。转写稿调试时正是先发现 a 给宽高不生效，再发现 block 会跑到下一行。

标题与段落样式

为什么需要：整体右对齐后，还要控制标题大小、粗细、行高和段落字号。
怎么想：标题用 h2，字号 36px，取消加粗用 font-weight:400；行高给 100px 可以撑开高度并让文字垂直居中。段落只给字号 20px，颜色继续继承父级。
怎么做：写 .banner h2 { font-size:36px; font-weight:400; line-height:100px; }，.banner p { font-size:20px; }。
易错点：转写稿强调“给了行高可以不用给高，行高会把盒子撑开”，但不要因此误以为所有盒子都必须用行高代替高度；这里标题适合行高撑开。颜色 #333 已由父级继承，p 不必重复写。

按钮链接的显示模式转换

为什么需要：a 默认是行内元素，直接给 width、height 不生效，但按钮需要点击区域。
怎么想：要宽高，就要转换显示模式；要既能有宽高又不独占一行、还能受父级右对齐影响，应转成行内块 inline-block。
怎么做：给 .banner a 设置 width:125px; height:40px; background-color:#f06b1f; display:inline-block; text-align:center; line-height:40px; color:#fff; text-decoration:none; font-size:20px;。
易错点：写成 display:block 后宽高有了，但块元素独占一行，按钮会掉到下一行；inline-block 才同时具备“一行排列”和“可设宽高”。转换声明尽量写在样式前部，先确定盒子类型再写宽高背景。调试工具提示行内元素宽高不生效时，就是在提醒你转换显示模式。

完整代码

HTML 标签：

<div class="banner">
  <h2>让创造产生价值</h2>
  <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
  <a href="#">我要报名</a>
</div>

CSS 样式：

.banner {
  height: 500px;
  background-color: #f3f3f4;
  background-image: url(./images/bk.png);
  background-repeat: no-repeat;
  background-position: left bottom;

  /* 文字控制属性，继承给子级 */
  text-align: right;
  color: #333;
}

.banner h2 {
  font-size: 36px;
  font-weight: 400;
  line-height: 100px;
}

.banner p {
  font-size: 20px;
}

.banner a {
  width: 125px;
  height: 40px;
  background-color: #f06b1f;

  display: inline-block;
  /* 转块级无法右对齐，因为块元素独占一行 */
  /* display: block; */

  text-align: center;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
}

易错点汇总

先确认大盒子尺寸和背景，再填内容；右对齐优先给父级，利用继承减少重复；a 没有宽高时先想显示模式；需要宽高又不想独占一行用 inline-block；颜色继承后，链接白色、去下划线仍需单独写。这样调试顺序就是：盒子可见 → 背景位置正确 → 文字靠右 → 按钮大小和位置正确。

先看速查表：这一节到底记什么

本节笔记只给了一张快捷键表，转写稿里并没有逐条展开讲快捷键，所以下面以表为准，再结合转写稿中真实出现的“写样式—保存—打开浏览器—开调试工具检查—改完再保存”的调试节奏，说明这些键为什么值得记、怎么用。

快捷键	作用
win键 + d	快速返回桌面
ctrl+z	撤销
ctrl+f（find）	查找
ctrl+h	替换
ctrl+g	快速跳到对应行上去

为什么需要快捷键：减少“找菜单”的时间

转写稿里做行内块元素和显示模式转换时，反复出现同一套动作：写 display: block，保存，打开浏览器看效果；发现宽高不生效，再打开调试工具检查小A，看到 display: inline 的灰色提示，再回来改代码。这个过程中，真正花时间的往往不是写那一行代码，而是“找刚才写在哪”“把某个词批量改掉”“改错了退回去”。

快捷键解决的就是这类动作。它不改变知识本身，但能让你在“写—看—改”的循环里少点几次鼠标。尤其调试时思路是连续的，手一离开键盘去找菜单，思路容易断。

怎么想：按“编辑、定位、系统”三类记

不要死背五个键，先分类：

• 编辑类：ctrl+z 撤销。
• 定位类：ctrl+f 查找、ctrl+h 替换、ctrl+g 跳行。
• 系统类：win+d 回桌面。

这样记的好处是：改错了想到“编辑”，找代码想到“定位”，窗口挡视线想到“系统”。

怎么做：逐条拆开

win + d：快速返回桌面。
为什么需要：浏览器、编辑器、调试工具叠在一起时，想快速看桌面文件或暂时收起窗口。怎么想：它是“显示桌面”，不是“关闭窗口”。怎么做：按一次收起所有窗口，再按一次恢复。易错点：不要把它当成关软件；有些系统里再按一次是恢复刚才的窗口状态，但不要依赖它保存工作。

ctrl + z：撤销。
为什么需要：改样式、删内容、替换错了，第一反应应该是退回去。怎么想：它是“退回上一步”，不是“删除”。怎么做：改错后立刻按，连续按可连续退。易错点：撤销有步数限制，不同软件、不同编辑器的撤销栈不一样；在浏览器输入框里按，撤销的是输入内容，不是代码文件里的修改。转写稿里改 display 时如果手滑写错，最直接的就是 ctrl+z。

ctrl + f：查找。
为什么需要：转写稿里要“找到我的小A”，代码一长，靠眼睛翻很慢。怎么想：f 对应 find，只找不改。怎么做：按下后输入关键词，比如 display、.nav a，回车逐个跳。易错点：查找范围取决于当前焦点——在编辑器里找代码，在浏览器页面里找页面文字；找不到时先确认焦点在哪。

ctrl + h：替换。
为什么需要：批量改同一个词时，比如把某个颜色值或类名统一改掉，比逐个找快。怎么想：h 是替换，通常和查找成对出现。怎么做：先查找确认命中范围，再决定“替换”还是“全部替换”。易错点：不要一上来就“全部替换”；先看查找结果，确认没有把不该改的地方一起改掉。改错了仍然用 ctrl+z 退。

ctrl + g：快速跳到对应行。
为什么需要：调试工具或报错信息常给行号，知道行号却手动滚很费时。怎么想：g 对应 go，去某一行。怎么做：按下后输入行号回车。易错点：它依赖“当前文件/当前编辑器”的上下文；在浏览器页面里按通常不是跳代码行。转写稿里检查小A的样式时，如果已经知道问题在某一行，ctrl+g 比滚动快。

把快捷键放进转写稿的调试过程

转写稿中有一段很典型的调试：给A设了宽高却不生效，打开调试工具检查，看到 display: inline，提示“不妨将 display 设为除了 inline 之外的某个值”，于是改成 display: block，保存后再看，宽高生效。这个流程可以这样用快捷键：

1. 用 ctrl+f 找 .nav a 或 display，快速定位样式。
2. 知道行号就用 ctrl+g 跳过去。
3. 改错立刻 ctrl+z。
4. 如果要把多处相同写法统一改，先 ctrl+f 确认，再用 ctrl+h 替换。
5. 窗口太乱，win+d 回桌面拿素材或看文件，再回来继续。

转写稿里“会级”“行那块”“签两个”“宅一句”等是语音转写误差，实际应理解为“块级”“行内块”“前两个”“加一句”。快捷键本身不受这些同音字影响，但读稿时要注意别被带偏。

易错点汇总

第一，快捷键依赖“焦点”：焦点在编辑器、浏览器页面、调试工具里，同一个键效果可能不同。第二，ctrl+f 是查找，ctrl+h 是替换，不要混。第三，替换前先查找确认范围，避免误伤。第四，ctrl+z 不是万能的，保存后、关闭后能否撤销取决于软件。第五，win+d 是显示桌面，不是关闭程序。

小结

这一节要背的表很短，但真正要练的是“手不离开键盘”的习惯。先按“编辑、定位、系统”三类记住，再放进转写稿那种“改样式—保存—检查—再改”的循环里用。用顺了，调试时思路会更连贯。

课件图示

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>banner 效果</title>
  <style>
    .banner {
      height: 500px;
      background-color: #f3f3f4;
      background-image: url(./images/bk.png);
      background-repeat: no-repeat;
      background-position: left bottom;

      /* 文字控制属性，继承给子级 */
      text-align: right;
      color: #333;
    }

    .banner h2 {
      font-size: 36px;
      font-weight: 400;
      line-height: 100px;
    }

    .banner p {
      font-size: 20px;
    }

    .banner a {
      width: 125px;
      height: 40px;
      background-color: #f06b1f;

      display: inline-block;
      /* 转块级无法右对齐，因为块元素独占一行 */
      /* display: block; */

      text-align: center;
      line-height: 40px;
      color: #fff;
      text-decoration: none;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="banner">
    <h2>让创造产生价值</h2>
    <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
    <a href="#">我要报名</a>
  </div>
</body>
</html>

要点：

• .banner 设置高度、背景色、背景图，并用 background-position: left bottom 把背景图放左下角。
• text-align: right 和 color: #333 写在父级 .banner 上，会继承/影响子级文字，减少重复代码。
• .banner h2 用 line-height: 100px 撑高并垂直居中，font-weight: 400 取消标题默认加粗。
• .banner a 是行内元素，默认不能设置宽高；要设宽高需转显示模式。
• 易错点：这里不能用 display: block，因为块级元素独占一行，链接无法靠右；应使用 display: inline-block。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>热词导航 A 转块级</title>
  <style>
    .nav a {
      /* 先确认盒子类型，再写宽高 */
      display: block;

      width: 200px;
      height: 80px;
      background-color: #3064bb;
    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#">热词1</a>
    <a href="#">热词2</a>
    <a href="#">热词3</a>
    <a href="#">热词4</a>
    <a href="#">热词5</a>
  </div>
</body>
</html>

要点：

• a 默认是行内元素，直接给 width、height 不生效；display: block 转为块级后宽高生效。
• 这里 5 个链接是竖着排列的，所以转成 block 合适，块级元素会独占一行。
• 转写稿强调：display 尽量写在样式第一行，先确认盒子类型，再设置宽高、背景等。
• 易错点：只写宽高不写 display，链接不会变大；如果想一行显示多个，应转 inline-block，但要注意行内块之间可能出现缝隙。

常见错误

1. 现象：给 .banner a 设了 width/height 却不生效。
   原因： a 默认是行内元素，宽高不生效。
   修法： 按案例改为 display: inline-block;；不要误用 block，否则链接会独占一行，无法留在右侧。

2. 现象：链接改成 display: block; 后跑到左边/单独占一行，父级 text-align: right; 也带不过去。
   原因： 块级元素独占一行，父级 text-align 主要控制行内/行内块内容，不能把块级子元素直接推到右侧。
   修法： banner 中“我要报名”用 inline-block；若必须用块级，需要后续用盒模型/布局手段处理。

3. 现象：h2、p、a 都分别写 text-align: right;，代码重复。
   原因： 没有利用父级继承，文字类属性可由 .banner 统一控制。
   修法： 在 .banner 上写 text-align: right; color: #333;，子级只写差异样式；链接内部文字居中再单独写 text-align: center;。

4. 现象：背景图平铺、位置不对，或只显示一部分。
   原因： 漏写 background-repeat: no-repeat; 或 background-position: left bottom;，复合属性顺序/空格写错。
   修法： 检查 background: #f3f3f4 url(./images/bk.png) no-repeat left bottom;，或拆开逐条确认。

5. 现象：h2 设了高度但文字没有垂直居中，或盒子高度不符合预期。
   原因： 只写 height，没有用行高控制单行文字垂直位置。
   修法： 案例中给 .banner h2 写 line-height: 100px;，用行高撑开并垂直居中；需要时再补 height。

6. 现象：h2 仍然加粗、链接仍有下划线、链接文字不是白色。
   原因： 只做了布局，漏掉默认样式重置与文字修饰。
   修法： h2 加 font-weight: 400;；a 加 text-decoration: none; color: #fff;，再统一字号与行高。

练习

1. 按笔记结构完成 banner：大盒子、h2、p、a，要求背景图在左下角且不平铺，三个内容整体右对齐。
2. 只允许在父级写一次 text-align 和 color，完成 banner 中标题、段落、链接的右对齐与文字颜色继承，并说明哪些子级必须单独覆盖。
3. 把“我要报名”分别尝试写成 display: block; 与 display: inline-block;，记录两种显示差异，并选出符合 banner 效果的写法。
4. 给 banner 增加一条检查清单：背景颜色、背景图片、平铺、位置、标题字号/字重/行高、段落字号、链接宽高/背景色/文字居中/去下划线。逐项自查并修正。
5. 用复合属性重写 banner 的背景设置，再拆回单条属性，确认两种写法效果一致且没有漏项。

原视频对照

#	视频	时长
1	行内块元素	03:37
2	显示模式转换	09:13
3	综合案例1开始	06:59
4	作业布置	02:01
5	综合案例2开始	08:26
6	综合案例2结束	11:22
7	作业安排	07:40

小结

1. banner 案例的核心不是堆样式，而是先确定盒子结构与显示模式，再处理背景、继承和对齐。
2. 链接要宽高时优先想到显示模式转换；banner 中的链接要用 inline-block，不能用 block 破坏右侧排列。
3. 父级 .banner 适合统一控制 text-align 和 color，子级只写字号、行高、宽高、背景色等差异项。
4. 背景图四要素要逐项核对：颜色、图片、是否平铺、位置；复合属性写完必须回看效果。
5. h2 的单行垂直居中可通过行高实现，同时别忘了去掉默认加粗。
6. 链接样式要成套检查：宽高、背景色、水平居中、垂直居中、文字颜色、去掉下划线。
7. 块级元素不能靠父级 text-align 随意右对齐；行内/行内块才可以被父级文字对齐方式影响。
8. 写完 banner 后按“结构→显示模式→背景→继承→文字细节”的顺序自查，比零散改样式更稳。