作业讲解-背景图固定案例与作业讲解-列表图标案例（Day7 1/3）

本页对应 Day07_CSS，共 7 段视频，约 1 小时 18 分。

学习目标

• 能归纳并区分已学的 CSS 选择器类型、伪类选择器及权重规则，并正确判断复合选择器的优先级。
• 能独立完成背景图固定案例，使用 background-image、background-position: center、background-attachment: fixed 实现页面滚动时背景图固定效果。
• 能独立完成列表图标案例，使用 list-style 相关属性替换列表项图标，并通过选择器去除超链接默认下划线。
• 能说明盒子模型由内容、内边距、边框、外边距组成，并准确指出各组成部分在元素中的位置与作用。
• 能根据内容宽高、左右内边距和左右边框计算盒子总宽高，明确外边距不计入盒子尺寸。
• 能使用 max-width、min-width、max-height、min-height 限制元素尺寸，并说明行内元素、行内块元素、块级元素的默认宽高计算规则。

知识点

先回顾：选择器与属性要成体系记

为什么需要：选择器和属性越学越多，如果不分类，写页面时容易“认识但不会用”，调试时也判断不出样式为什么失效。
怎么想：选择器先分基本选择器、组合选择器、伪类选择器；属性按字体、文字颜色、文本、背景、光标、列表、表格七组记。组合选择器权重比较时，ID 先比，再比类和伪类，最后比标签；并集选择器要各算各的。
怎么做：伪类顺序按 link → visited → hover → active 写，越难达成的状态越往后。例如：

a:link { color: #333; }
a:visited { color: #666; }
a:hover { color: red; }
a:active { color: blue; }

易错点：hover、active 所有元素都可用，link、visited 只对超链接有效；font-size 小于 12px 时浏览器通常仍按 12px 显示；并集选择器不要合在一起比权重。

背景图固定案例：宽度不定时让图片中心对中心

为什么需要：元素宽度常跟着视口变，如果背景图固定尺寸，在不同屏幕上容易只看到边角。
怎么想：设计师通常给一张 1920 宽的大图，把有效内容放中间，两边做渐变；页面里让背景图居中，再设置固定，就能让有效内容始终在中间。
怎么做：页面写 4 个文字区块、3 个背景区块，高度统一 600px；文字区块用 line-height:600px 实现单行纵向居中；body 去掉默认 8px 外边距；公共背景类设置居中与固定。

body { margin: 0; }
.section { height: 600px; }
.section-t {
  line-height: 600px;
  text-align: center;
  font-size: 40px;
}
.section-bg {
  background-position: center;
  background-attachment: fixed;
}
.bg01 { background-image: url("./image/bg2.jpg"); }
.bg02 { background-image: url("./image/bg3.jpg"); }
.bg03 { background-image: url("./image/bg4.jpg"); }

易错点：body 自带外边距，不去掉四周会有缝隙；background-position:center 是背景图在元素上的位置，不是元素在页面里的位置；背景图超出元素的部分看不见。

列表图标案例：用类名提取公共样式

为什么需要：列表默认有左缩进和默认图标，直接写会和标题不对齐，也不符合设计图。
怎么想：ul 默认有约 40px 左内边距，可以去掉或给标题加同样缩进实现对齐；图标用 list-style 复合属性，图标在 li 里面用 inside；部分项不要图标就设 none，需要图标的项再单独设置。
怎么做：

.videos {
  list-style: url("video-icon.gif") inside;
}
.photos {
  list-style: url("photo-icon.gif") inside;
}
.hot-news {
  list-style: none;
}
.hot-news .hot {
  list-style: url("hot-icon.gif");
}
a { text-decoration: none; }

易错点：list-style 只对 ul、ol、li 有效，给 div、p 设置没用；inside 和默认 outside 效果不同；超链接下划线要用 text-decoration:none 去掉。

盒子模型：内容、内边距、边框、外边距

为什么需要：设置 width:400px 后，检查元素却显示 448px，不理解盒子组成就会误判尺寸。
怎么想：盒子从里到外是内容、内边距、边框、外边距。width、height 设的是内容区；总宽=内容宽+左右内边距+左右边框，外边距不算盒子尺寸；高度同理。
怎么做：

.item {
  width: 400px;
  padding: 20px;
  border: 4px dashed red;
  margin: 30px;
  background: #ccc;
}

总宽 = 400 + 20×2 + 4×2 = 448px；内容高由文字撑成 126px 时，总高 = 126 + 40 + 8 = 174px。
易错点：外边距像“护城河”，影响与相邻元素距离，但不算盒子总尺寸；不设边框时内边距仍然存在；文本和后代元素都显示在内容区。

最大最小宽高与默认宽高

为什么需要：页面要适应不同屏幕，后端内容长度也会变化，需要限制元素不要无限变大或过小。
怎么想：固定宽高一般不和最大最小宽高一起设置；块级元素默认总宽=父元素内容宽-自身左右外边距，高度由内容撑开；行内元素宽高由内容撑开且不能设置宽高；行内块也由内容撑开。
怎么做：

.item01 {
  padding: 20px;
  background: #ccc;
  max-width: 1000px;
  min-width: 600px;
}

内容最大 1000px，加左右内边距后总宽 1040px；内容最小 600px，总宽最小 640px。块级默认宽度推导：父内容宽 1000px，自身左右外边距 20px、30px，则总宽为 950px。
易错点：设了固定宽后仍受 min-width、max-width 限制；行内元素设宽高无效；无内容的行内元素宽为 0，看不见；不要死记规则，用浏览器盒子模型图和缩放视口观察推导。

回顾范围与学习目标

为什么需要：前两天学的选择器和属性数量已经不少，如果不整理，后面学新内容时容易混淆。怎么想：把这一节当成“索引课”，按“选谁—设什么—谁生效”三条线回顾。怎么做：先梳理选择器体系，再梳理七组属性，最后用权重和书写顺序解释冲突。易错点：只背属性名，不记作用范围；比如列表样式只能用于列表，表格样式只能用于 table，这些限制比属性名更容易错。

选择器：从基本到组合

为什么需要：页面元素很多，必须先精准选中，样式才有地方生效。怎么想：基本选择器负责“直接选”，组合选择器负责“按关系选”。怎么做：基本选择器包括 ID、类、标签、通配；组合选择器包括后代（空格）、子元素（>）、交集（连写）、并集（逗号）。转写稿里强调，后代选择器中间是空格，子元素选择器中间是大于号，大于号两边加空格只是为了好看，不影响语法。易错点：后代是“里面所有后代”，子元素只选“直接子级”；交集要求同时满足，并集是“各选各的”。

伪类与书写顺序

为什么需要：同一个元素在不同状态下要有不同样式，例如鼠标悬停。怎么想：伪类是按“状态”选元素，不是按名字选。怎么做：:link 和 :visited 只能选超链接，分别表示未访问和已访问；:hover 和 :active 所有元素都可用，其中 hover 极常用。转写稿提醒，一个未访问超链接在鼠标放上并按下时，可能同时满足 link、hover、active，如果都设置了 color，就看谁写在后面。易错点：语法上顺序不强制，但为了体验，通常把越难达成的状态往后写；不要把伪类当成普通类名理解。

选择器权重

为什么需要：多个规则同时命中一个元素时，必须决定谁生效。怎么想：先看单个选择器权重，再看组合选择器逐项比较。怎么做：单个权重中 ID 最高，类和伪类同级，其次标签，最后通配；组合选择器先比 ID，ID 分不出再看类和伪类，再分不出看标签；权重相同则后写覆盖前写。易错点：并集选择器不能合起来算权重，要“各算各的”；类和伪类同级，不要误以为伪类更低。

字体与文字颜色

为什么需要：文字是页面主要内容，字体和颜色决定基础可读性。怎么想：字体样式是一组，文字颜色单独记。怎么做：字体包括 font-size、font-weight、font-style、font-family 和复合属性 font；文字颜色用 color。转写稿特别强调，font-size 不能小于 12，小于 12 浏览器也按 12 显示。易错点：color 只写一个单词，不要拼错；font 是复合属性，写它会重置相关子属性，行高要写在字号后并用斜杠分隔。

文本样式

为什么需要：文本除了字体，还需要间距、修饰、缩进、对齐和行高。怎么想：文本样式比较杂，按作用记。怎么做：letter-spacing 是字间距，word-spacing 是词间距；text-decoration 可加下划线、删除线、上划线，也可去掉超链接下划线；text-indent 是首行缩进，值为长度；text-align 设置元素内文本的水平对齐；vertical-align 主要用于行内或行内块元素与同行文字按基线、中线、底线对齐，也可做上下标，表格单元格还能纵向对齐；line-height 是相邻两行文字中线之间的距离，不是行距。转写稿还提醒，单行文字把行高设成元素高度，可实现纵向居中。易错点：text-align 设的是元素内文本，不是元素自己；vertical-align 要设在行内或行内块元素本身上；line-height 是 font 的子属性，font 后写可能把它覆盖掉。

背景、光标、列表与表格

为什么需要：这些属性负责装饰、交互和特殊结构。怎么想：背景记六项，光标记常用值，列表和表格记专用限制。怎么做：背景包括 background-color、background-image、background-repeat、background-position、background-attachment 和复合属性 background；光标常用 cursor: pointer 和 move，也可用图片自定义，但图片尺寸要合适，url 后逗号再写备用关键字；列表包括 list-style-type、list-style-position、list-style-image 和 list-style；表格包括 table-layout、border-spacing、border-collapse、caption-side、empty-cells。易错点：给 body 设背景色是整个页面背景；background-position 是背景图在元素上的位置，图大图小都一样理解；background 复合属性没有数量和顺序要求；列表样式只能用于 ul、ol、li，给 div、p 没用；表格样式只能给 table，给 thead、td 不好使；border-collapse 合并边框后，border-spacing 无效，empty-cells 在合并边框下也不能正常隐藏空单元格。

小结与自检

为什么需要：这一节是阶段复盘，不整理就会“学了新的忘了旧的”。怎么想：用“选谁—设什么—谁生效”自检：选择器能否选中，属性是否用对作用域，冲突时权重和顺序是否清楚。怎么做：把选择器分类、权重比较、七组属性各默写一遍，再对照转写稿里的易错点查漏。易错点：转写稿说目前选择器只是 CSS 选择器的一部分，后面布局后还会继续学；现在不要死记硬背，要理解规则背后的逻辑，先把已学内容记牢。

课堂画面

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>背景图固定案例</title>
  <style>
    body {
      margin: 0;
    }

    .section {
      height: 600px;
    }

    .section-t {
      height: 600px;
      line-height: 600px;
      text-align: center;
      font-size: 40px;
    }

    .section-bg {
      height: 600px;
      background-position: center;
      background-attachment: fixed;
      background-repeat: no-repeat;
    }

    .bg01 {
      background-image: url('./image/bg2.jpg');
    }

    .bg02 {
      background-image: url('./image/bg3.jpg');
    }

    .bg03 {
      background-image: url('./image/bg4.jpg');
    }
  </style>
</head>
<body>
  <div class="section section-t">生活不仅眼前的苟且，还有远方的枸杞。</div>
  <div class="section section-bg bg01"></div>
  <div class="section section-t">失败不可怕，可怕的是，你还相信这句话。</div>
  <div class="section section-bg bg02"></div>
  <div class="section section-t">你一定是塑料袋，除了会装还是会装。</div>
  <div class="section section-bg bg03"></div>
  <div class="section section-t">生活不仅眼前的苟且，还有远方的枸杞。</div>
</body>
</html>

要点解释：

• body { margin: 0; } 去掉 body 默认外边距，否则页面四周会有缝隙。
• .section { height: 600px; } 让带字区域和带图区域高度一致。
• .section-t 中 line-height: 600px; 与 height: 600px; 一致，可实现单行文字纵向居中；text-align: center; 实现横向居中。
• .section-bg 中 background-position: center; 让背景图中心对准元素中心，解决元素宽度随屏幕变化的问题。
• background-attachment: fixed; 实现页面滚动时背景图固定不动。
• 易错点：line-height 等于高度只适合单行文字；背景图路径要按本地 image 目录实际素材替换，否则图片不显示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>列表图标案例</title>
  <style>
    a {
      text-decoration: none;
    }

    h3 {
      padding-left: 40px;
    }

    .videos {
      list-style: url('./image/video-ic.gif') inside;
    }

    .photos {
      list-style: url('./image/photo-icon.gif') inside;
    }

    .hot-news {
      list-style: none;
    }

    .hot-news .hot {
      list-style-image: url('./image/hot-ic.gif');
    }
  </style>
</head>
<body>
  <h3>热门视频</h3>
  <ul class="videos">
    <li><a href="#">视频一</a></li>
    <li><a href="#">视频二</a></li>
  </ul>

  <h3>图片新闻</h3>
  <ul class="photos">
    <li><a href="#">图片新闻一</a></li>
    <li><a href="#">图片新闻二</a></li>
  </ul>

  <h3>头条新闻</h3>
  <ul class="hot-news">
    <li class="hot"><a href="#">头条新闻一</a></li>
    <li><a href="#">普通新闻二</a></li>
    <li class="hot"><a href="#">头条新闻三</a></li>
    <li class="hot"><a href="#">头条新闻四</a></li>
  </ul>
</body>
</html>

要点解释：

• a { text-decoration: none; } 去掉超链接默认下划线。
• h3 { padding-left: 40px; } 用来和 ul 默认左内边距对齐。
• .videos、.photos 使用 list-style: url(...) inside;，inside 让自定义图标显示在 li 里面。
• .hot-news { list-style: none; } 先去掉整个列表默认图标。
• .hot-news .hot { list-style-image: url(...); } 再单独给带图标的 li 设置图片，默认图标在 li 外面。
• 易错点：列表样式只对 ul、ol、li 生效，给 div、p 设置无效；list-style: none; 与 list-style-image 同时使用时要注意覆盖关系。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>盒子模型与最大最小宽高</title>
  <style>
    body {
      margin: 0;
    }

    .item {
      width: 400px;
      padding: 20px;
      border: 4px dashed red;
      margin: 30px;
      background: #CCC;
    }

    .item01 {
      padding: 20px;
      background: #CCC;
      max-width: 1000px;
      min-width: 600px;
    }

    .item02 {
      width: 400px;
      padding: 20px;
      margin: 10px 0;
      background: #CCC;
      min-height: 100px;
      max-height: 200px;
    }
  </style>
</head>
<body>
  <div class="item">
    盒子模型：width 是内容宽，总宽 = 400 + 20 * 2 + 4 * 2 = 448px；margin 不算盒子尺寸。
  </div>

  <div class="item01">
    最大宽度 1000px，最小宽度 600px；不写固定宽时随父元素变化，但受最大最小宽限制。
  </div>

  <div class="item02">
    item02 内容少时高度由内容撑开；设置 min-height: 100px 后内容区至少 100px。
  </div>

  <div class="item02">
    item02 内容很多时会被 max-height: 200px 限制，超出部分会溢出。
  </div>
</body>
</html>

要点解释：

• .item 中 width: 400px; 设置的是内容宽度，不是盒子总宽度。
• 盒子总宽度 = 内容宽 + 左右内边距 + 左右边框；本例为 400 + 20 * 2 + 4 * 2 = 448px。
• margin 是外边距，在元素边界之外，不计入盒子自身尺寸。
• .item01 不写固定宽，块级元素默认宽度随父元素内容宽度变化，同时受 max-width 和 min-width 限制。
• .item02 设置 min-height 和 max-height 限制内容区高度；内容超出 max-height 时会溢出。
• 易错点：未设置 box-sizing 时，width 不包含 padding 和 border；最大最小宽高一般不与固定宽高一起设置，否则会互相影响。

常见错误

1. 行高写了却不生效 现象：line-height: 600px 写在前，刷新后文字没有纵向居中，行高像是被重置了。 原因：line-height 是 font 的子属性，后面只要出现 font 简写，没写出的子属性会被重置为默认值。 修法：把行高写进简写 font: 40px/600px "微软雅黑"，或把 font 简写放在 line-height 之前；能不用简写就别用。

2. background-attachment: fixed 没效果 现象：页面滚动时背景图跟着跑，或固定效果时有时无。 原因：后写的 background 简写把 attachment 覆盖掉了，background 没写 fixed 就重置为默认 scroll。 修法：把 fixed 写进 background 简写里，或保证 background 简写在 background-attachment 之前。

3. 盒子总宽算错，排版溢出换行 现象：设 width: 400px; padding: 20px; border: 4px solid，按 400 排两列，结果第二列被挤到下一行。 原因：width 只是内容宽，实际占位 = 内容 + 左右内边距 + 左右边框（外边距不计入盒尺寸但占位置）。 修法：用 box-sizing: border-box，或提前把 padding/border 从总宽里扣掉；检查元素看盒模型图核对数字。

4. 给行内元素设宽高无效 现象：span 设了 width: 200px; height: 100px，页面毫无变化。 原因：行内元素尺寸只能被内容撑开，宽高属性直接被忽略。 修法：改 display: inline-block / block，或把尺寸设到外层容器上。

5. min-width 和固定 width 打架 现象：设 width: 400px，实际却是 600px。 原因：min-width: 600px 仍在生效，固定宽被限制住。 修法：同一元素不同时用固定宽高与最大/最小宽高；需要自适应时只留 min-width / max-width。

6. list-style 设了没反应，或图标位置不对 现象：给 div、p 设 list-style: url(...) 无效；图标跑到文字外面不齐。 原因：列表样式只对 ul/ol/li 生效；图标默认 outside。 修法：选择器换成 ul/ol/li，再加 inside（list-style: url(x.png) inside）；不想显示图标时用 none。

7. 链接四个伪类顺序写反，hover 失效 现象：:hover 改了颜色，鼠标放上去没变。 原因：同一元素同时满足多个状态时权重相同，后写的覆盖先写的，:link / :visited 写在了 :hover 后面。 修法：按 :link → :visited → :hover → :active 顺序写。

8. 页面四周有白边 现象：整页内容贴着浏览器边缘留了一圈 8px 空隙。 原因：body 自带默认外边距。 修法：body { margin: 0; }（或全局重置），改完刷新确认缝隙消失。

练习

1. 盒子尺寸对账：写一个 div，width: 300px; padding: 15px 20px; border: 5px solid #333; margin: 30px;。先手算内容宽、盒总宽、连同外边距的水平占位，再用浏览器盒模型图逐个核对，三个数字全对才算过。

2. 单行文字纵向居中：做一个高 500px、宽 100% 的横幅，里面只有一行标题，要求文字在横幅中水平垂直都居中。不许用 padding 凑高度，只能用行高方案；再把行高故意写错一次，观察文字偏移方向并说明原因。

3. 全屏背景图固定：做一个 7 段式页面（4 段纯文字 + 3 段背景图），每段高 600px，文字段单行居中，背景段图片固定、随页面滚动"不动"。要求：屏幕宽度从 1300px 拖到 1900px 时，背景图有效内容始终在可视区中间，左右不出现空白。自查：检查元素里看背景图定位值。

4. 列表图标改造：写三组列表（热门视频 / 图片新闻 / 头条新闻），前两组用自定义图片图标且图标在文字内侧，第三组三个条目中只有首尾带图标、其余不带，同时去掉所有链接下划线。自查：缩放窗口时图标与文字是否始终对齐。

5. 默认宽高三连测：分别用 span、display:inline-block 的 div、块级 div（放在一个有宽高和内边距的父容器里）各写一个元素，都不设宽高，只加背景色。记录三者默认尺寸，然后给块级元素加 margin-left: 20px; margin-right: 30px，再记录一次，用一句话解释数字变化。

原视频对照

#	视频	时长
1	回顾	18:34
2	作业讲解-背景图固定案例	12:25
3	作业讲解-列表图标案例	05:41
4	盒子模型的概念和组成	09:00
5	影响盒子大小的因素	02:54
6	元素设置最大最小宽高	13:30
7	元素默认宽高	16:10

小结

1. 行高既能做纵向居中，也是 font 的子属性——用简写就会丢，这条必须形成肌肉记忆。
2. 背景定位调的是"图在元素上"的位置；元素宽随屏幕变时，让设计师给 1920 宽的图、有效内容居中，是行业通用解法。
3. 盒子的总尺寸只算内容 + 内边距 + 边框，外边距不算；但外边距会影响元素在父容器里能分到多少宽度。
4. 最大/最小宽高与固定宽高一般不同时用，前者是给自适应布局兜底的。
5. 三种显示模式的默认尺寸规则：行内被内容撑开且不可设宽高，行内块被内容撑开，块级宽度默认撑满父内容区（要扣掉自身左右外边距）。
6. 列表样式、表格样式都是"专款专用"，选择器写错对象，属性写得再对也无效。
7. 伪类顺序、选择器权重、并集选择器分开算权重——这三处是选择题和实际改样式时最容易翻车的地方。
8. 所有尺寸问题先看盒模型图，所有覆盖问题先看权重和书写顺序，别靠猜。