黑马前端 2024 · 教程站

主题

CSS 进阶（三） ​

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

学习目标 ​

  • 能使用 background-image、background-repeat、background-position 为段落或列表项设置左侧小图标，并通过 text-indent 或内边距调整文字与图标的间距。
  • 能使用 background-size 的百分比、长度值、cover、contain 控制背景图缩放，并说明 cover 与 contain 在铺满盒子和完整显示图片上的差异。
  • 能使用 background-attachment: fixed 实现背景固定效果，并通过滚动页面验证背景图是否随内容移动。
  • 能使用 background 复合属性一行书写背景色、背景图、平铺、位置/尺寸和固定方式，并正确处理位置与尺寸需相邻且用斜杠分隔的语法要求。
  • 能通过 :hover 更换盒子背景图，并能定位和修正将 background-repeat 误写入 background-image 的语法错误。
  • 能区分块级元素与行内元素的显示特点，用代码验证是否独占一行、宽高设置是否生效、默认宽度与父级或内容的关系，并为不同布局选择合适标签。

知识点 ​

显示模式是什么：先判断标签怎么“占位置” ​

为什么需要： 布局网页时，不能只凭标签名字选标签，还要看它默认是独占一行，还是能一行放多个。显示模式就是标签的显示方式，决定了内容怎么摆放。

怎么想： 先看元素默认行为：它是否独占一行？能不能直接设置宽高？宽度由父级还是内容决定？根据这三点选择合适标签。

怎么做： 本节把常见显示模式分为块级元素、行内元素、行内块元素，并可用 display 转换。

显示模式分类图

易错点： 不要一上来就写样式，先判断元素默认显示模式；否则容易出现“想并排却上下排列”“设了宽高没反应”的问题。

块级元素：独占一行，宽高生效 ​

为什么需要： 页面中的大块内容、上下结构模块，通常需要独占一行，并且能设置宽高。

怎么想： 典型如 div、p、h 系列、ul、li 等，默认独占一行。宽度默认是父级的 100%；如果没有父级限制，就和浏览器一样宽。注意这叫“默认占满一行”，不是继承。

怎么做： 直接给块级元素设置 width、height、background-color 会生效。

块级元素示意图

html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块元素</title>
    <style>
      /* 块级元素 */
      /* 1. 独占一行 */
      /* 2. 可以设置宽度和高度 */
      /* 3. 宽度默认和父亲一样宽，如果没有父亲，则和浏览器一样宽 */
      .box1,
      .box2 {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <p>abc</p>
    <div class="box1">div1</div>
    <div class="box2">
      <p>123</p>
      <p>123</p>
    </div>
  </body>

</html>

调试时可看到：.box2 宽 100px，里面的两个 p 也各占一行，宽度跟父级一样；外层没有父级限制的 p 则和浏览器同宽。

易错点： 块级元素默认一行只能放一个，不要硬塞两个块级元素指望并排；宽 100% 是默认占满父级，不是继承属性。

行内元素：一行多个，宽高由内容撑开 ​

为什么需要： 一行里要放多个小内容，比如文字、链接、强调文字时，用行内元素更合适。

怎么想： 典型如 span、strong、em、a 等。它们一行可以显示多个，除非空间不够才换行。

怎么做： 直接给行内元素设 width、height 通常不生效；它的宽高由内容撑开。比如两个 span 写不同字数，宽度会随文字变化。

行内元素示意图

易错点： 行内元素设宽高无效，不要误以为代码写错；高度也通常撑不高，除非内容本身把它撑开或转换显示模式。链接 a 属于行内元素，这个很常用。

行内块元素：既能一行多个，又能设宽高 ​

为什么需要： 有些内容既想一行放多个，又需要控制宽高，单用块级或行内都不合适，就要认识行内块元素。

怎么想： 它综合了两者特点：一行可以显示多个，同时设置宽高生效；宽高也可以由内容撑开。

怎么做： 布局时先判断需求：要并排且能设宽高，就考虑行内块；具体标签可结合后续布局需求选择。

行内块元素示意图

易错点： 不要和行内元素混淆。行内元素通常设宽高无效，行内块设宽高生效；判断时看“能否并排”和“宽高是否生效”两点。

转换显示模式：用 display 按布局需要切换 ​

为什么需要： 标签默认模式不一定满足布局。例如链接默认是行内元素，但有时希望它像块级元素一样占一行、能设宽高。

怎么想： 用 display 转换显示模式。经验上重点记住：把行内元素如链接转换为块级或行内块即可。display: block 尽量写到样式第一行，避免被后续样式覆盖后不好排查。

怎么做： 常见写法如 display: block; 转为块级，display: inline-block; 转为行内块，display: inline; 转为行内。块级元素可以用 text-align 控制里面的行内元素或行内块元素左中右对齐。

display 属性示意图

易错点： 块级元素不能控制里面的块级元素对齐；text-align 主要作用于行内内容。转换后要重新检查一行显示数量和宽高表现，不能只看标签原名。

案例目标与效果拆解 ​

热词链接效果图

本节做“热词”综合案例：页面上有 HTML、CSS、JavaScript、Vue、React 几个热词链接，默认是蓝底白字、固定宽高、文字水平垂直居中；鼠标悬停时背景色变浅。
为什么需要：把链接样式、显示模式转换、文字居中和 :hover 串起来练一遍。
怎么想：转写稿里强调过，链接 a 属于行内元素，一行可以放多个，直接设宽高通常不生效；而案例要求每个热词像盒子一样竖排，所以要把 a 转成块级显示。
怎么做：先写结构，再用 display:block 让每个链接独占一行，设置宽高、背景色、文字样式，最后写 :hover。
易错点：只写宽高却忘了 display:block，宽高可能不生效；忘了去掉下划线，链接仍会有默认下划线。

HTML 结构搭建 ​

html
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>

为什么需要：每个热词都是可点击链接，语义上用 a 最合适。
怎么想：先用多个 a 平铺，观察默认效果；它们默认会在一行内排列，这正是行内元素特点。
怎么做：统一写 href="#" 作为占位链接。
易错点：不要为了竖排就随意换成 div，链接仍应使用 a；结构阶段先不急着堆样式。

CSS 默认效果 ​

html
<style>
/* 默认效果 */
a {
display: block;
width: 200px;
height: 80px;
background-color: #3064bb;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 80px;
font-size: 18px;
}

/* 鼠标悬停的效果 */
a:hover {
background-color: #608dd9;
}
</style>

为什么需要：让每个热词形成统一尺寸的色块，并保证文字居中。
怎么想：转写稿中讲文字垂直居中时提到“行高等于高”；这里高度 80px，所以 line-height:80px。水平居中用 text-align:center。
怎么做：display:block 让 a 独占一行且宽高生效；width:200px;height:80px 固定盒子；background-color 设底色；color:#fff 设白字；text-decoration:none 去下划线；font-size:18px 调字号。
易错点：line-height 与 height 不一致会导致文字不垂直居中；text-align:center 管水平居中，不管垂直居中。

悬停效果与调试过程 ​

为什么需要：鼠标经过时给出反馈，提升交互感。
怎么想：只改背景色即可，不需要重复写宽高、居中。转写稿里调试 :hover 时提醒：鼠标经过样式默认看不到，要在检查面板中勾选 :hover 才能查看。
怎么做：写 a:hover { background-color:#608dd9; }，保存后鼠标移入链接观察颜色变化。
易错点：若在 :hover 里写 background-image，它只能跟图片地址，不能顺手写 no-repeat；多个背景属性要合并时应使用 background 复合写法。转写稿还提到检查面板中黄色叹号表示语法错误，属性被划掉可能只是被后面的样式层叠覆盖，要区分二者。

小结 ​

本案例核心是：a 默认行内显示，想设宽高并竖排就加 display:block；文字水平居中用 text-align:center，垂直居中用行高等于高度；悬停只改需要变化的背景色。调试时善用检查面板勾选 :hover，并留意语法错误与层叠覆盖的区别。

案例目标：看清这张 banner 长什么样 ​

banner 效果示意图

这张图里有两件事要同时成立：一是左下角有一张装饰图（背景图），二是右侧的文字标题、说明和按钮整体靠右排列。案例的难点不在文字，而在“背景图怎么贴到左下角”和“链接按钮为什么能设宽高还能靠右”。

先搭结构：一个容器装三块内容 ​

为什么需要：先把 HTML 结构定下来，CSS 才有地方下手。

怎么想：整个 banner 是一个大盒子，里面放标题、段落、链接三个子元素。

怎么做：

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

易错点：不要把背景图写成 <img> 插进结构里，它是装饰，应该交给 CSS 的 background-image。

背景图：钉在左下角，且只出现一次 ​

为什么需要：装饰图要垫在文字下面，不占布局位置，还得固定贴在左下角。

怎么想：颜色打底 → 引图 → 取消平铺 → 定位到左下。转写稿里强调过：背景图默认是平铺的，打开就是铺满一片，所以 no-repeat 不能省。

怎么做：

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;
}

易错点：background-image 后面只能跟一个 url()，不能再接 no-repeat。转写稿里专门纠过这个错误：“background-image 只能跟一个，它不能跟多个”，只有 background 复合写法才允许带一串值。调试时如果看到样式被划掉、旁边有黄色叹号，那是语法错误，不是层叠。

文字整体靠右：用继承省掉三遍代码 ​

为什么需要：h2、p、a 都要靠右，如果分别写 text-align: right 就重复了。

怎么想：text-align 是可以继承的文字控制属性，写在父级 .banner 上，子级自动拿到。

怎么做：见上面 .banner 里的 text-align: right;。

易错点：text-align 控制的是盒子内部行内内容的对齐，不是把盒子本身推到右边。

标题和段落：字号与行高 ​

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

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

为什么需要：h2 默认加粗、字号偏大，设计稿要求 36px 且不加粗，所以 font-weight: 400 要显式写；line-height: 100px 撑开标题与顶部、与段落之间的距离。

易错点：h2 默认是加粗的，只改 font-size 不改 font-weight，视觉上会偏重。

按钮：为什么要 inline-block ​

css
.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;
}

为什么需要：链接要变成一个 125×40 的橙色按钮。

怎么想：a 是行内元素，转写稿里明确演示过——行内元素直接给宽高是不生效的，宽度由内容撑开。所以要宽高，就得有块级特性；但块级元素独占一行（转写稿：“块元素独占一行，宽度默认和父级一样宽”），一旦 display: block，它就占满整行，text-align: right 也就推不动它了。两头都要，就用 inline-block。

怎么做：display: inline-block 让它既接受宽高、又不独占一行，父级的右对齐继续生效。

易错点：line-height: 40px 等于 height: 40px，这是转写稿里反复提的“文字垂直居中，行高等于高”；如果只写高度不写行高，文字会贴在顶部。另外 text-decoration: none 别忘，否则链接带下划线。

检查与调试 ​

写完用检查工具点中 .banner，看样式有没有被划掉或出现黄色叹号。本节 CSS 是逐条分开写的；如果以后想改成 background 复合写法，记住转写稿里的规则：background-size 必须和 background-position 挨在一起、中间用斜杠隔开，否则整条声明会报错。

课件图示 ​

课件第39页：案例 综合案例二 – banner 效果

课件第2页：l 复合选择器 l CSS 特性 l 背景属性 l 显示模式

课件第33页：显示模式 显示模式：标签（元素）的显示方式。 作用：布局网页的时候，根据标签的显

课件第34页：l 块级元素 l 独占一行 l 宽度默认是父级的100% l 添加宽高属性生效

课件第35页：总结 总结 1. “独占一行；宽高属性生效；默认宽度是父级的100%”是 什么显

代码示例 ​

示例一：块级元素的显示特点 ​

html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块元素</title>
    <style>
      /* 块级元素 */
      /* 1. 独占一行 */
      /* 2. 可以设置宽度和高度 */
      /* 3. 宽度默认和父亲一样宽，如果没有父亲，则和浏览器一样宽 */
      .box1,
      .box2 {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <p>abc</p>
    <div class="box1">div1</div>
    <div class="box2">
      <p>123</p>
      <p>123</p>
    </div>
  </body>

</html>

关键行与易错点

  • .box1, .box2 是并集选择器，一次性给两个盒子设置宽高；div 属于块级元素，width/height 能直接生效，两个盒子必然上下排列（独占一行）。
  • .box2 里的两个 <p> 同样是块级元素，它们的宽度是 100px——这不是"继承"，而是块级元素宽度默认等于父级的 100%，父级只有 100px 宽，它就只能占 100px，所以两段文字仍然上下排列，放不到一行。
  • body 里那个没有设置样式的 <p>abc</p>，宽度会和浏览器一样宽——块级元素在没有父级宽度限制时默认铺满整行，这正是它"独占一行"的原因。
  • 易错点：把"宽度默认 100%"理解成"继承父级宽度"。继承是针对 color、font-size 这类文字属性的；块级元素是"自己就占满一行"，父亲多宽它就多宽。

示例二：综合案例一 —— 热词（行内元素转块级） ​

html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热词</title>
    <style>
      /* 默认效果 */
      a {
        display: block;
        width: 200px;
        height: 80px;
        background-color: #3064bb;
        color: #fff;
        text-decoration: none;
        text-align: center;
        line-height: 80px;
        font-size: 18px;
      }

      /* 鼠标悬停的效果 */
      a:hover {
        background-color: #608dd9;
      }
    </style>
  </head>

  <body>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JavaScript</a>
    <a href="#">Vue</a>
    <a href="#">React</a>
  </body>

</html>

关键行与易错点

  • display: block; 是本例的核心：a 本身是行内元素，不写这一句，width: 200px; height: 80px; 完全不生效，五个链接会挤在一行、只有文字大小。转成块级后，每个链接独占一行，宽高才起作用。
  • 笔记经验：display: block 尽量写到样式的第一行，先确定显示模式，再谈尺寸。
  • text-align: center 控制的是盒子里面行内内容的水平居中，line-height: 80px 等于 height，实现单行文字垂直居中——两者配合才有文字居中的效果，缺一不可。
  • text-decoration: none 去掉链接默认下划线；a:hover 只改背景色，属于鼠标悬停状态样式。
  • 易错点：忘记 display: block 就拼命调宽高，调半天没反应；或者把 line-height 写成和 height 不一样的值，文字就会偏上/偏下。

示例三：综合案例二 —— banner 效果（行内块元素） ​

html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 上的 text-align: right; 和 color: #333; 属于文字控制属性，会继承给子级，所以 h2、p、a 里的文字自动靠右、变深灰，不用逐个再写一遍。
  • 按钮必须用 display: inline-block;。若写成 display: block;，a 独占一行、宽度撑满父级，text-align: right 就管不了它了——笔记原注释写得很清楚："转块级无法右对齐，因为块元素独占一行"。
  • 背景三件套：background-image 指定图片，background-repeat: no-repeat 不平铺，background-position: left bottom 让图片贴左下角。实际运行前要把 ./images/bk.png 换成你自己的图片路径。
  • .banner a 的 line-height: 40px 与 height: 40px 相等，按钮文字垂直居中；text-align: center 让按钮文字水平居中。
  • 易错点：块级元素不能控制里面块级元素的对齐（text-align 对块级子元素无效），只能控制行内元素或行内块元素，所以这里靠 inline-block 让按钮"听 text-align: right 的话"。

常见错误 ​

  1. 现象：给 a、span 设 width/height 不生效；原因：行内元素不识别宽高；修法：改为 display:inline-block 或 display:block，再设宽高。
  2. 现象：banner 中按钮 display:block 后无法右对齐；原因：块级元素独占一行，父级 text-align:right 控制不到块级子元素；修法：按钮改 display:inline-block，父级保留 text-align:right。
  3. 现象：background-image: url(...) no-repeat; 出现黄色感叹号；原因：background-image 不是复合属性，只能写图片地址；修法：拆成 background-image + background-repeat，或改用 background 复合写法。
  4. 现象：复合写法里直接追加 cover 被划掉；原因：background-size 在复合写法中必须紧跟 background-position，并用 / 分隔；修法：写成 background: ... 0 0 / cover ...;，或拆开写 background-size:cover;。
  5. 现象：盒子变大后背景图重复漏出；原因：背景图默认平铺；修法：显式写 background-repeat:no-repeat;，复合写法中加 no-repeat。
  6. 现象：想让块级子元素居中，给父级加 text-align:center 无效；原因：text-align 主要控制行内/行内块内容，不控制块级子元素；修法：块级自身用 margin:0 auto，或改用行内块/弹性布局。
  7. 现象：cover 后图片被裁、contain 后盒子留白，误判为代码错误；原因：两者取舍不同；修法：按“铺满可裁切”选 cover，按“完整显示可留白”选 contain，比例一致时差异很小。
  8. 现象：滚动页面时背景图不动，文字动；原因：设置了 background-attachment:fixed;；修法：需要背景随内容滚动时改回默认 scroll。

练习 ​

  1. 用 5 个 a 标签制作热词按钮：宽 200px、高 80px、一行一个、文字水平垂直居中、悬停变浅蓝；写出关键 CSS 并验收。
  2. 复现 banner 结构：h2 + p + a，父级右对齐，报名按钮 125×40、文字居中；说明为什么按钮不用 display:block。
  3. 背景小练习：p 宽 200px、高 40px、粉色底，背景图标贴左且垂直居中、不平铺，文字向右让出图标；把 text-indent 调到视觉合适。
  4. 鼠标经过换背景：400×400 盒子默认 cat.jpg，:hover 换 dog.jpg；要求背景不重复平铺，并说明为什么 :hover 中只改 background-image 更合适。
  5. 纠错并改写：background: pink url(./1.png) no-repeat cover fixed;，给出合法复合写法和拆分写法各一份。

原视频对照 ​

#视频时长
1背景小练习05:13
2背景缩放08:36
3背景固定04:42
4背景复合写法07:03
5鼠标经过更换背景08:13
6背景复习03:55
7块级元素07:21
8行内元素04:40

小结 ​

  1. 选标签先判断布局行为：是否独占一行、是否必须设宽高、是否需要一行多个。
  2. 块级适合页面分区和结构容器，行内适合文字与链接片段，行内块适合一行多个且要设宽高的控件。
  3. display 是布局补救手段，优先调整结构，其次再转换显示模式。
  4. 对齐控制要区分作用对象：text-align 管内容，块级自身居中用 margin:auto 或布局方案。
  5. 背景复合写法能简写，但 position/size 必须成对并用 / 连接，否则易出语法错误。
  6. 背景图默认平铺，工程上常显式 no-repeat，避免盒子尺寸变化后漏出重复图。
  7. cover 与 contain 按业务取舍：铺满可裁切选 cover，完整显示可留白选 contain。
  8. 调试 :hover 时用开发者工具勾选状态，看到黄色感叹号先查语法而不是层叠。