学成在线（二）

本页对应 学成在线，共 8 段视频，约 1 小时 13 分。

学习目标

• 能够使用 display:flex、flex:1 完成子项等分与“左右固定、中间自适应”的圣杯布局，并通过缩放浏览器验证左右宽度不变、中间自适应。
• 能够根据布局需求正确选用 flex-wrap、align-items、align-content、flex-direction、flex 等属性，完成单行/多行对齐、主轴方向调整和伸缩比例分配。
• 能够按规范搭建“学成在线”项目目录（images、uploads、css、index.html、base.css、index.css），并通过页面效果验证 CSS 引入及初始化样式生效。
• 能够说明 base.css 中字体、行高、文字颜色、去除链接下划线等初始化作用，并正确区分 images 与 uploads 文件夹的图片用途。
• 能够按照“先整体后局部、从外到内、从上到下、从左到右”的思路，使用通栏容器与 wrapper 版心（1200px、margin:0 auto）搭建 header 结构，并用 flex 排列 logo、导航、搜索和用户区域。
• 能够按 logo 专业写法完成 h1>a 结构、背景图设置、display:block、文字隐藏及 title 提示，并验证 logo 可点击区域铺满、背景图显示且文字在 HTML 中存在但不可见。

知识点

布局总原则：先整体再局部

为什么需要：页面一复杂，如果先抠文字颜色、图标大小，很容易写了半天发现大盒子位置不对，只能返工。
怎么想：先看整体结构，再拆局部；从外到内、从上到下、从左到右。比如先判断头部是通栏还是版心，再拆 logo、导航、搜索、用户区。
怎么做：先画大盒子，再画里面小盒子；同一行从左到右写，上下结构从上到下写。
易错点：父级嵌套错一位，页面就会大乱；不要一上来就写文字样式，先保证盒子位置正确。

CSS 实现三步：盒子→位置→内容

为什么需要：先能看见盒子范围，才敢往里面装内容。
怎么想：第一步画盒子，第二步调位置，第三步控制图片和文字。
怎么做：先给宽高、背景色；再用 flex、内外边距调位置；最后处理图片、文字颜色、下划线等。
易错点：行内元素直接给宽高常常不管用；调位置时先确认父级是谁，别把 padding 加错层级。

flex 让子元素不再区分行内/块级

为什么需要：转写稿里给 span 直接设宽高不管用，因为 span 是行内元素。
怎么想：只要父级写了 display:flex，里面的子项都按弹性盒子处理，不再纠结原来是行内还是块级。
怎么做：

.box {
  display: flex;
}
.box span {
  flex: 1;
}

给父级加 flex 后，子项可以设宽高；flex:1 表示占一份。
易错点：flex:1 的份数不是拿总宽直接分，而是先扣除固定宽、间隙，再分剩余空间。一个中间盒子写 flex:1 或 flex:100 看起来可能一样，但多个盒子时要按比例写清楚。

圣杯布局：两侧固定，中间自适应

为什么需要：像京东手机版头部，左右宽度不变，中间随屏幕伸缩。
怎么想：左右写死宽度，中间用 flex:1 吃剩余空间。
怎么做：

.left,
.right {
  width: 100px;
}
.center {
  flex: 1;
}

易错点：中间有多个盒子时，剩余空间会再按份数分；固定宽和缝隙要先减掉。调试时拖宽窗口看左右是否不变、中间是否伸缩。

项目文件准备与版心

为什么需要：CSS 很长，不能全塞进 HTML；图片也要区分固定素材和上传素材。
怎么想：images 放 logo、背景图等固定图；uploads 放产品、宣传等常换图；css/base.css 做初始化，css/index.css 写首页样式。
怎么做：HTML 里用 link 引入两个 CSS；定义版心：

.wrapper {
  width: 1200px;
  margin: 0 auto;
}

易错点：CSS 文件不能直接浏览器预览，要预览 HTML；背景图路径在 CSS 中常写 ../images/logo.png，.. 表示上一级。

header 与 logo 的专业写法

为什么需要：header 往往是通栏白底，但内容要约束在版心里；logo 不只是图片，还要能点回首页，并兼顾 SEO。
怎么想：先做通栏 .header，里面再放 .wrapper，wrapper 里用 flex 排四块。logo 结构用 h1 > a，文字写网站名，背景图给 a。
怎么做：

.header {
  height: 100px;
  background: #fff;
}
.header .wrapper {
  padding-top: 29px;
}
.logo {
  width: 195px;
  height: 41px;
}
.logo a {
  display: block;
  height: 41px;
  background: url(../images/logo.png) no-repeat;
  font-size: 0;
}

易错点：转写稿中 logo 贴顶，是给 .header .wrapper 加 padding-top:29px，不能直接改全局 .wrapper，否则影响其他版心；a 是行内元素，点不到整块，要转 block 并给高；隐藏文字用 font-size:0，不是把文字删掉。调试 header 背景看不见时，先检查背景色是否生效，可临时改粉色确认盒子存在。

整体思路：先通栏，再版心

为什么需要：头部背景要铺满浏览器，但里面的 logo、导航、搜索、用户不能贴着浏览器两边，必须约束在固定宽度内居中。
怎么想：先整体再局部。头部先做一个“通栏”大盒子 .header，宽度不写，默认和浏览器一样宽；里面再套一个“版心”盒子 .wrapper，负责固定宽度并居中。
怎么做：结构上是 .header > .wrapper > 四个子盒子。版心通常定义 width: 1200px; margin: 0 auto;，转写稿中也是先量出版心为 1200px。
易错点：通栏盒子不要再写固定宽度，否则背景铺不满；版心盒子不要忘记居中，否则内容会靠左。

HTML结构：先把四个盒子搭出来

为什么需要：头部内部要放 logo、导航、搜索、用户四块内容，先把容器搭好，后面才好分别写样式。
怎么想：按从上到下、从左到右的顺序，先写大盒子，再写里面的四个子盒子。
怎么做：保留本节结构：

<!-- 头部区域 -->
<div class="header">
  <div class="wrapper">
    <!-- logo -->
    <div class="logo">logo</div>
    <!-- 导航 -->
    <div class="nav">导航</div>
    <!-- 搜索 -->
    <div class="search">search</div>
    <!-- 用户 -->
    <div class="user">用户</div>
  </div>
</div>

易错点：嵌套层级别写错，四个子盒子要放在 .wrapper 里面；注释建议写上，后面代码变长时方便查找。

CSS：header 与 wrapper 的职责分开

为什么需要：.header 管通栏背景和高度，.wrapper 管版心宽度、居中和内部整体下移，两者职责不同。
怎么想：先给 .header 写宽高背景色，确认大盒子位置；再给 .wrapper 加宽度和居中。转写稿里调试时先写 123，发现内容靠左，就是因为还没套版心；套上 .wrapper 后才回到中间。
怎么做：本节样式为：

/* 头部区域 */
.header {
  height: 100px;
  background-color: #fff;
}

.header .wrapper {
  padding-top: 29px;
  display: flex;
}

其中 .wrapper 的版心样式来自项目准备：width: 1200px; margin: 0 auto;。padding-top: 29px 让四个子盒子整体向下挤 29px，和设计图对齐。
易错点：不要写成全局 .wrapper { padding-top: 29px; }，否则其他版心也会被影响；要限定为 .header .wrapper。白色背景在白色页面上不容易看见，调试时可临时改成粉色确认盒子是否出现。

flex：让四个子盒子排成一行

为什么需要：logo、导航、搜索、用户需要横向排列。
怎么想：给它们的父级 .wrapper 加 display: flex，四个子盒子就成为弹性盒子，默认在一行显示。
怎么做：display: flex; 写在 .header .wrapper 上；后续再分别给 .logo、.nav、.search、.user 设置宽度或尺寸。
易错点：flex 要加在父级上，不是加在四个子盒子上；flex 默认不换行，子盒子内容过多时可能被挤压，需要后续再调宽度。

调试与易错点小结

先写 .header 的高度和背景色，用浏览器检查元素确认样式生效；再套 .wrapper 看内容是否居中；最后加 padding-top 和 display: flex 看四个盒子是否整体下移并横向排列。CSS 文件本身不能直接预览，要在 HTML 页面中预览。最关键的易错点是：通栏不给宽、版心要居中、padding-top 必须限定在 .header .wrapper。

logo 要同时干两件事

先把需求想清楚，再动手写标签。logo 在页面里不只是“一张好看的图”，它承担两个功能：

1. 单击跳回首页——用户在任何页面迷路了，点 logo 就能回首页，这是几乎所有网站的通例。
2. 搜索引擎优化（SEO）——logo 里要带上网站名称这个关键字，帮助提升百度搜索排名。

所以它不能简单写成一个 div 加背景图。正确的思路是：用 h1 承载权重，用 a 承载点击，用文字承载关键字。h1 在一个页面里权重很高、一般只写一个，正好留给 logo。

结构：h1 > a > 网站名称

<div class="logo">
  <h1><a href="#" title="学成在线">学成在线</a></h1>
</div>

h1 是为了 SEO 权重，a 是为了点击跳转，a 里面的“学成在线”就是给搜索引擎抓取的关键字。title 属性是加分项：鼠标悬停在 logo 上时会显示“学成在线”，用户一眼就知道这是哪个网站。

易错点：直接把文字删掉、只留背景图，页面看起来一样，但搜索引擎抓不到关键字，SEO 的作用就没了。

先把 logo 放进版心，再谈样式

header 是通栏盒子（宽度跟浏览器一样），里面还要套一层版心盒子 .wrapper（宽 1200px、margin: 0 auto 居中），版心里再放 logo、导航、搜索、用户四块，用 flex 让它们排成一行。

logo 盒子本身宽 195px、高 41px。但四个盒子贴着 header 顶部不好看，需要整体下移，做法是给版心加 padding-top: 29px。这里有个关键细节：不能直接改 .wrapper，否则页面里所有版心都会跟着下移；要写成 .header .wrapper，只作用于 header 里的这一个版心。这就是“给选择器加父级限定”的典型用法。

a 默认是行内元素，先转成块

结构写好后刷新页面，会发现 a 只有文字那么大，鼠标只有放在字上才能点。原因：a 是行内元素，宽高由内容决定，直接给宽高不生效。

做法是转成块级元素：

/* logo */
.logo a {
  display: block;
  width: 195px;
  height: 41px;
  background-image: url(../images/logo.png);
  font-size: 0;
}

转成块级后，宽度默认就和父盒子一样宽，所以 width: 195px 与父盒子一致；再给 height: 41px，整个紫色区域就都能点了。背景图也要给 a 而不是 .logo 或 h1，这样点击热区和背景图完全重合。

易错点：忘记 display: block 就直接给宽高，样式“看起来写了却不生效”。

背景图路径里的 ../ 是怎么来的

样式写在 css/index.css 里，图片在 images/logo.png 里。CSS 中 url() 的相对路径是相对于当前 CSS 文件计算的，所以要先用 ../ 退回上一级（项目根目录），再进 images：

css/index.css  →  ../  →  项目根  →  images/logo.png

易错点：写成 ./images/logo.png 会找不到图，因为那是从 css 文件夹里找 images。

font-size: 0：字要留，但不能看见

文字必须留在 HTML 里给搜索引擎爬，但用户不能看到它压在 logo 上。最简单的办法是把字号设为 0：

font-size: 0;

字还在 HTML 里，只是看不见了——搜索引擎抓的是 HTML 源码，不是渲染后的画面。易错点：用 display: none 或干脆删掉文字，搜索引擎就抓不到了。

调试过程：盒子“没出来”怎么办

第一次写完 header 盒子刷新，可能什么都看不到。先右键“检查”，确认盒子存在、样式生效——往往是因为背景色是白色，和页面底色一样，肉眼分不清。调试时可以临时把背景改成粉色，确认盒子的位置和大小，最后再把调试色删掉。另外，改完 CSS 一定要保存再刷新，转写稿里就出现过“样式没变化，其实是文件没保存”的情况。

导航区域的作用与整体位置

为什么需要： header 里通常要放 logo、导航、搜索、用户入口。导航负责把“首页、课程、职业规划”等主要入口集中呈现，让用户能快速跳转。它不是装饰，而是页面信息架构的一部分。

怎么想： 转写稿里先分析 header：外层是通栏，里面套一个版心 wrapper，版心里再分 logo、导航、搜索、用户四块；看到四块要在一行，就想到 flex。导航本身只是其中一块，所以不要一上来就写散链接，而要先明确它在 header 版心中的位置。

怎么做： 本节只处理导航内部结构：外层 .nav 控制与 logo 的间距，内部用 ul > li > a 组织三个导航项。.nav 左侧留出 100px，用来和前面的 logo 区域拉开距离。

易错点： 不要把导航直接塞进通栏 header 而忘记版心约束；类名要统一用 .nav，否则后面调样式容易找不到。若导航整体贴左，先检查 .nav 是否在 header 版心内，再检查 margin-left 是否生效。

HTML 结构：用 ul > li > a 组织导航

为什么需要： 导航本质是一组并列的链接，用列表表达更符合语义。笔记特别强调：ul > li * 3 > a 可以避免堆砌 a 标签，减少对搜索排名的不利影响。li 表示“一个导航项”，a 表示“可点击跳转”。

怎么想： 三个入口就写三个 li，每个 li 里放一个 a。不要写成 div 里直接堆多个 a，也不要把 a 直接挂在 ul 下。结构清楚后，CSS 才能分别控制“项与项的间距”和“链接本身的点击区”。

怎么做：

<!-- nav 导航 -->
<div class="nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">课程</a></li>
    <li><a href="#">职业规划</a></li>
  </ul>
</div>

易错点： li 和 a 的嵌套层级不要写错；链接文字要真实对应栏目；href="#" 只是课堂占位，实际项目要换成真实地址。若用 div 套 a 堆砌，语义会变差，也失去了列表结构。

CSS 样式：横排、间距、字号与悬停

为什么需要： ul 默认是块级列表，li 默认竖排；导航要横向排列，就要让 ul 成为弹性容器。li 负责项间距，a 负责文字大小、点击区域和悬停反馈。

怎么想： 先让 ul 横排：display: flex；再给 li 统一右间距：margin-right: 20px；最后给 a 设置字号、内边距、行高，并用 :hover 加底部蓝色边框，形成当前项/悬停提示。

怎么做：

/* nav导航 */
.nav {
  margin-left: 100px;
}

.nav ul {
  display: flex;
}

.nav li {
  margin-right: 20px;
}

.nav li a {
  font-size: 19px;
  padding: 8px;
  line-height: 34px;

}

.nav li a:hover {
  border-bottom: 2px solid #00a4ff;
}

易错点： 如果 li 还是竖着，先检查 .nav ul 是否写了 display: flex；如果链接没有横排间距，检查是否误写成 .nav a 而漏了 li 层级；最后一个 li 也会带右间距，视觉上可能偏宽，调试时可单独处理。a 仍是行内元素，上下 padding 的点击区表现要结合 line-height 看；hover 加 border-bottom 可能让高度变化，实际项目可预留透明边框避免抖动。

调试过程与收尾检查

为什么需要： 第一次把 HTML 和 CSS 分文件写，很容易出现“代码写了但页面没变化”。转写稿里反复提醒：先右击“检查”，看盒子有没有生成、样式有没有生效，再判断是结构问题还是选择器问题。

怎么想： 导航不显示横排，优先查 ul 的 flex；导航整体位置不对，查 .nav 的 margin-left 和父级版心；文字样式不对，查 .nav li a 是否命中。项目里 base.css 已做初始化，链接默认下划线、文字颜色等不要重复手写。

怎么做： 写完保存后刷新页面，用检查工具选中 .nav、ul、li、a 逐层确认；鼠标放到每个 a 上看 hover 蓝线是否出现。最后检查三个导航项是否一行、间距是否一致、与 logo 是否留有合适距离。

易错点： 不要只改 CSS 不保存；不要在 CSS 文件里直接预览页面；选择器层级不要写乱。导航是 header 的一部分，调试时既要看导航内部，也要看它是否被 header 版心正确约束。

搜索区域在 header 中的定位

为什么需要：学成在线 header 不是只有一个孤立的搜索框，而是通栏白色头部里放一个版心，版心内再排 logo、导航、搜索、用户四块内容。搜索区域必须先明确自己处在“版心内、与其他三项同一行”的位置，否则后面写宽高和间距时会越写越乱。

怎么想：转写稿里分析 header 时已经明确，上面是通栏盒子，里面再包版心；版心里四个盒子一行显示，看到这种一行排列就要想到 flex。搜索盒子是这四个子项之一，所以它的宽高、背景色、圆角都只作用在自己身上，不需要再单独转成块级元素来参与排列。

怎么做：先保证 header 的通栏盒子和版心盒子已经搭好，版心宽度按设计稿为 1200px 并居中；版心加 display:flex 后，再放入 logo、导航、搜索、用户四个子盒子。本节只写搜索外框，内部输入框和按钮后续再补。

易错点：不要把搜索盒子直接放到通栏 header 里，否则它不会受 1200px 版心约束；也不要忘记父级 flex，否则搜索盒子会按普通 div 独占一行。转写稿里反复强调“先整体再局部、从外到内”，这里就是先确认父级，再写搜索自己。

HTML 结构

为什么需要：搜索区域现在只需要一个承载外框的容器。先把结构写出来，才能用 CSS 给它宽高、背景色和圆角；如果一上来就堆输入框，反而看不清外框是否摆到了设计稿位置。

怎么想：笔记给出的结构非常简洁，就是一个 div，类名为 search。这说明当前阶段的目标是“搜索外框布局”，不是完整搜索功能。先让空盒子显形，再考虑里面装什么。

怎么做：在 header 版心内、按设计稿顺序放入搜索盒子：

<div class="search"></div>

易错点：类名要写对，CSS 里是 .search，HTML 里不能写成 serach 之类；空 div 默认没有高度，写完后如果看不到，不要先怀疑浏览器，先检查是否保存、类名是否一致、背景色是否生效。转写稿调试 header 时就出现过“盒子没出来”，本质是样式未生效或未保存，要先看检查面板。

CSS 外框样式

为什么需要：搜索框要有明确的宽高和浅灰底，才能和白色通栏区分开；圆角则让它呈现胶囊形，符合设计稿。没有这些外框样式，空 div 在页面上几乎不可见。

怎么想：笔记给的是固定尺寸：宽 412px、高 40px、背景 #f3f5f7、圆角 20px、左外边距 80px。圆角 20px 正好是高度 40px 的一半，所以上下半圆能接成胶囊形。margin-left:80px 用来和左侧导航拉开距离，这个间距按设计稿量取。

怎么做：保留笔记样式：

/* 搜索 */
.search {
  width: 412px;
  height: 40px;
  background-color: #f3f5f7;
  border-radius: 20px;
  margin-left: 80px;
}

易错点：border-radius 写 20px 才能形成半高圆角，不要随手写成 20%；背景色不要写成纯白，否则会和 header 白色通栏混在一起；margin-left 是搜索盒子自己的左间距，不要加到版心上，否则 logo、导航、用户都会一起右移。写完先保存，再刷新浏览器；若位置不对，用检查工具看搜索盒子的宽高和 margin 是否生效。

课件图示

代码示例

示例一：学成在线 header 整体布局（通栏 + 版心 + flex）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>学成在线</title>
  <style>
    /* ===== 基础初始化（对应 base.css） ===== */
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #f3f5f7;
      font: 14px/1.5 "Microsoft YaHei", 微软雅黑, sans-serif;
      color: #333;
    }
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
      color: #333;
    }

    /* ===== 版心：固定宽度 + 水平居中 ===== */
    .wrapper {
      width: 1200px;
      margin: 0 auto;
    }

    /* ===== 头部区域（通栏） ===== */
    .header {
      height: 100px;
      background-color: #fff;
    }

    .header .wrapper {
      padding-top: 29px;
      display: flex;
    }

    /* ===== logo 占位 ===== */
    .logo {
      width: 195px;
      height: 41px;
      background-color: purple;
    }

    /* ===== nav 导航 ===== */
    .nav {
      margin-left: 100px;
    }
    .nav ul {
      display: flex;
    }
    .nav li {
      margin-right: 20px;
    }
    .nav li a {
      font-size: 19px;
      padding: 8px;
      line-height: 34px;
    }
    .nav li a:hover {
      border-bottom: 2px solid #00a4ff;
    }

    /* ===== 搜索 ===== */
    .search {
      width: 412px;
      height: 40px;
      background-color: #f3f5f7;
      border-radius: 20px;
      margin-left: 80px;
    }
  </style>
</head>
<body>
  <!-- 头部区域 -->
  <div class="header">
    <div class="wrapper">
      <!-- logo -->
      <div class="logo">logo</div>
      <!-- 导航 -->
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">课程</a></li>
          <li><a href="#">职业规划</a></li>
        </ul>
      </div>
      <!-- 搜索 -->
      <div class="search">search</div>
      <!-- 用户 -->
      <div class="user">用户</div>
    </div>
  </div>
</body>
</html>

关键行与易错点

• .header 只给 height: 100px 和背景色，不给宽度 —— 宽度跟随浏览器，这就是"通栏"；里面的 .wrapper 才是 1200px 版心，用 margin: 0 auto 居中。
• padding-top: 29px 必须写成 .header .wrapper，不能直接写 .wrapper，否则后面所有页面用到版心的地方都会被顶下来 29px，等于"嫁格父亲"约束范围。
• 四个子盒子能在一行显示，靠的是 .header .wrapper 上的 display: flex；不用给每个子盒子写 float 或 display: inline-block。
• 导航用 ul > li > a 而不是堆 a 标签，是为了避免堆砌 a 标签导致搜索排名降级。
• 写 CSS 时注意 * { margin: 0; padding: 0 } 初始化，否则页面默认会顶不到浏览器边缘。

---

示例二：logo 优化写法（h1 > a > 网站名称 + 背景图 + 隐藏文字）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>学成在线</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #f3f5f7;
      font: 14px/1.5 "Microsoft YaHei", 微软雅黑, sans-serif;
      color: #333;
    }
    .wrapper {
      width: 1200px;
      margin: 0 auto;
    }
    .header {
      height: 100px;
      background-color: #fff;
    }
    .header .wrapper {
      padding-top: 29px;
      display: flex;
    }

    /* ===== logo ===== */
    .logo {
      width: 195px;
      height: 41px;
    }

    .logo a {
      display: block;
      width: 195px;
      height: 41px;
      background-image: url(../images/logo.png);
      font-size: 0;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="wrapper">
      <!-- logo -->
      <div class="logo">
        <h1><a href="#" title="学成在线">学成在线</a></h1>
      </div>
    </div>
  </div>
</body>
</html>

关键行与易错点

• 结构是 h1 > a > 网站名称：h1 提升权重（一个页面只留一个给 logo），a 实现点击跳转首页，a 里的文字"学成在线"是搜索关键字，供百度蜘蛛抓取。
• a 是行内元素，不给 display: block 它的大小只有文字那么大，鼠标点不到整块区域；转成块级后宽度等于父亲 195px，再补 height: 41px 才铺满。
• font-size: 0 是隐藏文字，不是删除文字 —— HTML 里仍有"学成在线"三个字，搜索引擎只认 HTML 不认 CSS，所以关键字照样被抓到。
• title="学成在线" 让鼠标悬停时出现提示文字，用户体验更专业。
• 背景图路径 url(../images/logo.png)：CSS 文件放在 css/ 文件夹里，要先 ../ 退回上一级，才能找到 images/ 文件夹；只写 images/logo.png 会 404。
• 自己练习时把 logo.png 放进 images/ 目录，或先把 background-image 注释掉，用背景色看盒子位置是否正确。

---

示例三：flex 圣杯布局（两侧固定，中间自适应）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>圣杯布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      width: 80%;
      height: 200px;
      border: 1px solid #000;
      margin: 50px auto;
    }

    /* 两侧固定 */
    .left,
    .right {
      width: 100px;
      background-color: skyblue;
    }

    /* 中间自适应，独占剩余份数 */
    .center {
      flex: 1;
      background-color: purple;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </div>
</body>
</html>

关键行与易错点

• .box 加 display: flex 后，三个子盒子自动一行显示；left 和 right 写死 width: 100px，不写高度时默认和父亲一样高（200px）。
• .center 写 flex: 1 表示占 1 份剩余空间：分配时先减去左右各 100px（以及手动写的缝隙），剩下的宽度全给它，所以拖动浏览器时两侧不变、中间伸缩。
• 只有一个中间盒子时，flex: 1 写 2、写 100 效果都一样（剩多少全给它），但习惯写 1，别人一看就懂。
• 如果中间放两个盒子（两个 .center），各写 flex: 1 才是平均分；若一个写 flex: 1、另一个写 flex: 2，则剩余宽度分成 3 份，各占 1/3 和 2/3。
• flex 下子元素不区分行内元素还是块级元素：像 span 这种行内元素，在父盒子加了 display: flex 后，直接写宽高、背景色就能生效，不需要再 display: block 转换。

常见错误

1. 现象：给 span 设置宽高无效，仍按文字大小显示。原因：未让父级成为 flex 容器，行内元素宽高不生效。修法：父级加 display:flex；不用 flex 时再转换显示模式。
2. 现象：header 内容贴左或贴顶。原因：通栏盒子里漏套版心，或版心未居中、未加顶部间距。修法：header > wrapper，版心设宽并 margin:0 auto，顶部间距只加在 .header .wrapper。
3. 现象：其他版心也被顶部间距顶下去。原因：把 padding-top 写进公共 .wrapper。修法：公共类只负责宽度和居中，局部偏移用 .header .wrapper 限定作用域。
4. 现象：logo 只有文字区域可点击。原因：a 仍是行内元素，未撑满 logo 盒子。修法：a 转 block，设宽高、背景图，并保留可访问名称。
5. 现象：logo 背景图 404。原因：CSS 中相对路径按 CSS 文件位置解析，误写成 ./images/...。修法：按目录改为 ../images/logo.png，并检查 link 引入路径。
6. 现象：logo 文字隐藏后不利于搜索收录。原因：用 display:none 或直接删除文字。修法：保留 h1 > a > 网站名称，用 font-size:0 隐藏视觉文字，并加 title。
7. 现象：中间自适应列宽度不符合预期。原因：误以为 flex:1 会把固定列和间距也算进去。修法：左右固定宽，中间 flex:1；固定宽和间距先扣除，多个自适应项再按份数分。
8. 现象：导航 hover 下划线出现时布局抖动。原因：hover 新增 border-bottom 改变盒模型。修法：预留透明边框，或用伪元素/box-shadow 实现下划线。
9. 现象：改完样式刷新无效。原因：在 CSS 文件上预览、文件未保存或路径错误。修法：保存后在 HTML 预览，检查 link 和浏览器检查面板。

练习

1. 用 flex 实现“左中右”圣杯布局：左右各固定 100px，中间自适应；拉伸浏览器时左右不变。写出关键 HTML/CSS，并说明固定宽度与 flex:1 的分配关系。
2. 完成学成在线 header 整体布局：header > wrapper > logo/nav/search/user，要求通栏白底、版心 1200px 居中、顶部间距 29px、四项一行排列。
3. 按专业化写法完成 logo：h1 > a > 网站名称，点击跳首页，背景图正确显示，点击区域覆盖 195×41，文字视觉隐藏但保留，鼠标悬停有提示。
4. 搭建 study 项目目录：images、uploads、css/base.css、css/index.css、index.html；正确引入两个 CSS，验证默认边距已清除，并说明为什么 header 的 padding-top 不能写进公共 .wrapper。
5. 排查两个问题并给出修法：导航 hover 下边框导致抖动；logo 背景图在浏览器中 404。

原视频对照

#	视频	时长
1	flex布局补充	11:16
2	flex复习	08:50
3	学成在线项目搭建	09:43
4	学成在线项目文件准备	03:26
5	base样式解释	03:20
6	学成在线header开始	13:54
7	学成在线-logo开始	08:52
8	学成在线logo优化	13:54

小结

1. 页面开发先结构后样式，先整体后局部，先摆盒子再填内容。
2. 通栏与版心要分开处理，公共类只做公共事，局部偏移必须加作用域。
3. flex 适合解决一行排布与自适应分配，固定宽度和间距要先从总宽中扣除。
4. logo 同时承担跳转、点击区域和 SEO 职责，结构、背景图、文字隐藏方式要配套。
5. 项目文件要按 images/uploads/css 组织，CSS 通过 link 引入，调试时预览 HTML 而不是 CSS。
6. 命名、注释和作用域是控制长页面维护成本的关键。
7. 尺寸以设计稿/像素大厨量取为准，写完及时保存、刷新、检查元素。