尚硅谷前端 2023 · 教程站

主题

伸缩盒等分布局与伸缩盒页面练习01（Day16 1/3） ​

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

学习目标 ​

  • 能区分多列布局中设置给多列容器与子元素的属性，并正确写出常用 flex 容器属性与 flex 项目属性。
  • 能使用 flex 完成等分布局，并解释 flex: 1 1 0、富裕空间分配以及自动换行导致无法收缩的原因。
  • 能编写 header 与 main 上下布局，正确设置 html、body 高度为 100%，并解释 body 高度为 0 时背景图 cover 出现异常的原因。
  • 能使用 flex 完成 header 内 logo 与导航左右分布、侧轴居中，以及 main 中列表整体居中、列表项等距排列。
  • 能使用 flex 实现圣杯布局：左右栏固定宽度、中间栏自适应，并说明各伸缩项目的伸缩特性设置依据。
  • 能说明响应式页面与“两套页面”的区别，并通过调整视口宽度观察页面变化，判断哪些类型的网站适合采用响应式布局。

知识点 ​

多列布局与 Flex 回顾：先分清“给谁设” ​

为什么需要：布局属性多，如果不先区分“设置给容器”还是“设置给项目”，很容易把 justify-content、align-self 这类属性写错位置。
怎么想：多列布局先找“多列容器”，再找里边的子元素；Flex 先找“伸缩容器”，再找“伸缩项目”。转写里反复强调：伸缩容器没有特殊显示模式，flex 就是块级，inline-flex 就是行内块级；真正要单独研究显示特点的是伸缩项目。
怎么做：多列容器常见属性包括列数 column-count、列宽 column-width、复合 columns、列间距 column-gap、列分割线的 column-rule-style/width/color 与复合 column-rule；子元素用 column-span: none | all。带前缀的 break-before/after/inside 了解即可。Flex 容器侧要记 display:flex、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content；项目侧要记 flex-basis、flex-grow、flex-shrink、flex、order、align-self。
易错点：同音字要纠正：不是“Com”，是 column；不是“flex girl”，是 flex-flow；不是“align content 给项目”，align-self 才是项目单独设侧轴对齐。默认宽度也别死背：块级默认宽度参照父元素，其他多数被内容撑开；伸缩项目默认被内容撑开，伸缩容器默认仍像块级一样占父元素宽度。

伸缩盒等分布局：一层项目，一层容器 ​

为什么需要：做一排等宽入口时，用浮动要清浮动、算宽度；Flex 可以让项目自动分剩余空间。
怎么想：先让外层 row 成为伸缩容器，里边的 a 成为伸缩项目；每个 a 再变成伸缩容器，让图片和文字上下排。转写里的关键推导是：给项目写 flex: 1 1 0，因为 basis 为 0，容器主轴长度几乎都成了“富裕空间”，几兄弟按扩展比例平均分。
怎么做：关键样式可按转写整理为：

css
.row {
  display: flex;
}
.row a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

易错点：图片突然变大，不是图片设了宽度，而是 a 变成伸缩容器后主轴竖向，侧轴横向默认 stretch，图片被横向拉伸；给 a 设 align-items:center 即可。还有：若容器自动换行，收缩前提就不成立，转写提醒“自动换行就不存在缩的可能了”。

页面练习：header 与 main 的高度分配 ​

为什么需要：页面常见结构是“头部高度固定，主体占剩余高度”。没有 Flex 时不好做，有了 Flex 就变成伸缩项目分配问题。
怎么想：先判断谁是容器：body 设 display:flex; flex-direction:column，header 和 main 成为项目；header 不伸不缩，main 占剩余。转写调试 body 背景图时发现：body 默认高度是 0，给 body 设 height:100% 前还要给 html 设高度，否则百分比没有参照。
怎么做：

css
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  background: url(bg.jpg);
  background-size: cover;
}
.header { height: 70px; flex: 0 0 auto; }
.main   { flex: 1 1 0; }

header 内部再 display:flex; justify-content:space-between; align-items:center，logo 与导航一左一右居中。导航里的 a 要设宽高时，先让父级 nav 成为伸缩容器，使 a 成为伸缩项目；否则行内元素直接设宽高不生效。
易错点：body 高度为 0 时给背景图设 cover 或定位，浏览器会在规则外处理，可能出现重复、错位；这不是“背景图坏了”，而是元素没有高度。内边距是否撑大宽度也要具体分析：header 宽度来自侧轴拉伸，加左右 padding 不一定按“内容宽 + padding”增加。

main 列表与圣杯布局：剩余空间与固定侧栏 ​

为什么需要：列表居中、项目间距、左右固定中间自适应，都是实际页面高频需求。
怎么想：main 里放 ul，先让 main 成为伸缩容器，用主轴、侧轴居中；再让 ul 成为伸缩容器，li 成为项目，设 width:150px、justify-content:space-between。li 内部再 display:flex; flex-direction:column; align-items:center; justify-content:space-around，解决图片文字居中与上下间距。圣杯布局则让 wrapper 成为容器，左右 flex:0 0 200px，中间 content 用 flex:1 1 0 吃掉剩余宽度。
怎么做：

css
.main { display: flex; justify-content: center; align-items: center; }
.content-list { display: flex; justify-content: space-between; }
.content-list li {
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.wrapper { display: flex; }
.left, .right { flex: 0 0 200px; }
.content { flex: 1 1 0; }

易错点：ul、li 的默认宽高仍要先判断显示模式和内容；图片被拉开仍是侧轴 stretch。圣杯里侧栏高度会被侧轴拉伸，中间自适应不是“写死宽度”，而是 flex:1 1 0 占剩余。

响应式页面：一套代码适配不同视口 ​

为什么需要：手机、平板、电脑、电视屏幕尺寸不同，同一套排版不可能永远放得下。
怎么想：转写把方案分两类：京东、淘宝的 PC 版和移动版网址不同，是两套页面，不叫响应式；苹果、微软、OPPO 这类网址不变、结构基本一套、样式随视口变化，才是响应式。开发调试时不必非模拟手机，直接拖视口宽度，观察导航收起、图片变窄即可。
怎么做：响应式适合内容不太多、以产品介绍和企业官网为主的页面；内容太多时设计师也很难在一套结构里响应。课堂此处只介绍概念，未展开媒体查询写法。
易错点：不要把“写了两套页面”误认为响应式；响应式核心是同一套代码根据视口尺寸响应，风格保持一致，页面结构基本不变，变化主要在 CSS 呈现。

本节回顾的目标：先分组，再判断 ​

多列布局和 Flex 布局涉及的属性不少，但学习时不要一上来死背属性名。转写稿反复强调：先把属性分成“设置给容器”和“设置给子元素/项目”两组，再理解每个属性解决什么问题。本节笔记的属性清单如下，先保留原代码，后面逐块回顾。

css
1 多列布局
   1.1 设置给多列容器（包裹元素）
       column-count
       column-width
       columns
       column-gap
       column-rule-style
       column-rule-color
       column-rule-width
       column-rule
   1.2 设置给子元素
       column-span
       -webkit-column-break-before
       -webkit-column-break-after
       -webkit-column-break-inside
       
 2 伸缩盒布局（弹性盒、Flex）
   2.1 伸缩容器和伸缩项目
   2.2 主轴方向和换行方式
   2.3 主轴对齐
   2.4 侧轴对齐
       一行
       多行
   2.5 伸缩项目伸缩性
   2.6 伸缩项目排序
   2.7 伸缩项目单独设置侧轴对齐
   2.8 属性总结
       设置给伸缩容器：
       	display
       	flex-direction
       	flex-wrap
       	flex-flow
       	justify-content
       	align-items
       	align-content
       设置给伸缩项目
        flex-basis
        flex-grow
        flex-shrink
        flex: grow shrink basis
        order
        align-self

多列布局：先分清容器和子元素 ​

为什么需要：多列布局用于把一段内容分成多列，类似报纸排版。属性必须分清写给“多列容器”还是“子元素”，否则不生效或效果不对。
怎么想：先问“谁是包裹元素”。包裹元素设置列数、列宽、列间距、列分割线；子元素只考虑是否跨列、是否在前后/内部断开。
怎么做：容器可用 column-count 指定列数，column-width 指定列宽，columns 是复合属性；列间距用 column-gap；分割线像边框一样拆成 style/color/width，也可用 column-rule。子元素用 column-span: all 跨所有列，或 none 只在一列；带 -webkit- 的 break 属性转写稿说明“了解即可”。
易错点：列数和列宽没必要同时指定，同时指定时按列数少的规则理解；分割线不是普通 border；带前缀属性不要当作所有场景必用。

Flex 回顾：容器没有特殊显示模式，项目才有 ​

为什么需要：Flex 的核心是“容器负责排列规则，项目负责伸缩与对齐”。转写稿特别强调：伸缩容器本身没有特殊的显示模式，display:flex 类似块级容器，inline-flex 类似行内块；真正特殊的是伸缩项目的显示特点。
怎么想：看到元素先判断身份：它是谁的容器？它是不是别人的项目？一个元素可以同时是“项目”和“容器”，这在页面练习中会一层层出现。
怎么做：给父元素设 display:flex，子元素天然成为伸缩项目；项目默认沿主轴排列，主轴默认横向。
易错点：把伸缩容器当成有独立默认宽高规则；把“容器宽度跟父元素一样宽”误判成项目宽度；忘记项目可以继续设 display:flex 变成下一层容器。转写稿中判断 body 高度为 0、背景图不是内容，就是典型调试过程：先看显示模式，再看是否设置宽高，最后看内容是否撑开。

主轴方向、换行与对齐 ​

为什么需要：Flex 不按“横着/竖着”死记，而按主轴和侧轴理解。主轴方向变了，对齐方向也跟着变。
怎么想：先确定主轴：flex-direction 控制方向；flex-wrap 控制换行；flex-flow 可同时设置二者。再确定对齐：主轴用 justify-content，侧轴用 align-items；发生多行时，行与行之间用 align-content。
怎么做：一行且不换行时，align-items 管项目在侧轴上的对齐；多行时 align-content 更适合管“行与行怎么排”。默认值常为 stretch，所以项目没设侧轴长度时会被拉伸。
易错点：换行后仍只用 align-items，可能把侧轴空间分给每一行；align-items 和 align-content 混用；主轴变竖向后仍按横向理解“高度/宽度”。转写稿中图片被拉大，就是因为父元素变 Flex 容器、主轴竖向、侧轴横向，默认 stretch 把图片横向拉伸；给容器设 align-items:center 即可取消拉伸。

伸缩性：grow、shrink、basis 与复合写法 ​

为什么需要：Flex 项目要在主轴方向分配剩余空间或压缩空间，靠的就是伸缩性。
怎么想：先看主轴上的“基准长度” flex-basis，它的权重大于普通 width；auto 时再参考 width，若都没设则被内容撑开。再看剩余空间：flex-grow 默认 0，所以默认不扩展；有富裕空间才按扩展比例分。空间不够时看 flex-shrink，默认 1，所以默认可收缩；收缩还受“不能自动换行”的前提影响。
怎么做：常用 flex: grow shrink basis，转写稿提醒顺序是 grow、shrink、basis；例如 flex:1 1 0 表示可扩展可收缩且基准为 0，剩余空间按比例分。
易错点：把 flex:1 的中间值乱写；忘记收缩前提是容器主轴长度不够且不换行；把 flex-basis 与 width 的优先级弄反；收缩计算还要考虑原主轴长度，步骤繁琐但不要烦躁。

排序与单独侧轴对齐 ​

为什么需要：有时不想改 HTML 顺序，只想调整项目显示顺序；有时只想让某一个项目在侧轴上单独对齐。
怎么想：整体排序用 order，数字越大越靠后；单独侧轴对齐用 align-self，它设置给项目自己，而不是容器统一设置。
怎么做：项目写 order:1 等；写 align-self:center 覆盖容器 align-items。
易错点：align-self 不要写到容器上；order 不是改 DOM 顺序；浮动对伸缩项目不起作用，转写稿明确说“浮动不如伸缩项目”，定位则仍可能脱离常规排列，需要单独判断。

属性总结与复习方法 ​

为什么需要：属性多时，靠死记容易“记住了还不会”。转写稿说，记不住属性只是小问题，查手册、看笔记、用编辑器提示都能解决；真正的问题是理解不到位。
怎么想：按“容器属性”和“项目属性”两栏记：容器有 display、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content；项目有 flex-basis、flex-grow、flex-shrink、flex、order、align-self。
怎么做：复习时先默写分组，再拿一个元素判断“它是容器还是项目”，最后用默认宽高、主轴侧轴、是否换行去推导效果。
易错点：把“默认宽度/高度”问题一律答成“被内容撑开”而不先判断显示模式；把背景图当内容；遇到不会就归因于“属性没记住”。转写稿的建议是多练习、多联想、多讨论，把逻辑理顺，而不是硬背。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

示例一：伸缩盒等分布局（伸缩项目同时又是伸缩容器） ​

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

  /* 伸缩容器：块级，宽度跟父元素（body）一样宽，不是被内容撑开 */
  .row {
    display: flex;               /* 里面的 a 立刻变成伸缩项目 */
  }

  /* a 既是伸缩项目，又是伸缩容器 —— 伸缩盒布局的核心 */
  .row a {
    flex: 1 1 0;                 /* grow shrink basis，basis 为 0 才会等分 */
    display: flex;               /* 自己再当一次伸缩容器 */
    flex-direction: column;      /* 主轴改成竖着：图片在上、文字在下 */
    align-items: center;         /* 侧轴（水平）居中，同时避免图片被拉伸 */
    padding: 10px 0;
    color: #333;
    text-decoration: none;
    border: 2px solid red;       /* 调试用的边框，做完要删掉 */
  }

  /* 图片占位，实际换成 <img src="images/xxx.png"> */
  .row a .pic {
    width: 60px;
    height: 60px;
    background: #ddd;
  }
</style>
</head>
<body>
  <div class="row">
    <a href="#"><span class="pic"></span><span>天猫</span></a>
    <a href="#"><span class="pic"></span><span>天猫</span></a>
    <a href="#"><span class="pic"></span><span>天猫</span></a>
    <a href="#"><span class="pic"></span><span>天猫</span></a>
    <a href="#"><span class="pic"></span><span>天猫</span></a>
  </div>

  <div class="row">
    <a href="#"><span class="pic"></span><span>天猫</span></a>
    <a href="#"><span class="pic"></span><span>天猫</span></a>
    <a href="#"><span class="pic"></span><span>天猫</span></a>
    <a href="#"><span class="pic"></span><span>天猫</span></a>
    <a href="#"><span class="pic"></span><span>天猫</span></a>
  </div>
</body>
</html>

关键行与易错点

  • .row { display: flex }：.row 是伸缩容器，它是块级元素，默认宽度跟父元素一样宽（铺满整行），不是被内容撑开——别把它当成伸缩项目去想。
  • flex: 1 1 0：basis 写成 0 后，每个项目在主轴上的长度都是 0，于是整个容器的主轴长度全成了富裕空间，5 个兄弟按扩展比例 1 平均分 → 等分布局。中间的 shrink 写 1 是习惯写法，写 0 也不影响。
  • a 同时是伸缩项目和伸缩容器，这是伸缩盒布局的核心：对父元素我是伸缩项目，对子元素我是伸缩容器。
  • 图片被拉大的坑：a 变成伸缩容器、flex-direction: column 之后，主轴竖着、侧轴横着，侧轴默认 align-items: stretch，图片就被横向拉伸。加 align-items: center 即可。
  • 不要给容器加 flex-wrap: wrap：一换行就没有收缩/等分的可能了，两行要靠两个独立容器写。

示例二：用 flex 实现圣杯布局（左右固定、中间自适应） ​

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

  /* 外壳：块级伸缩容器，宽度跟页面一样宽 */
  .wrapper {
    display: flex;
    height: 400px;
  }

  /* 左右两个“板”：不伸不缩，宽度写死 200 */
  .left {
    flex: 0 0 200px;
    background: #900;
  }
  .right {
    flex: 0 0 200px;
    background: #009;
  }

  /* 中间的“碑体”：basis 为 0，把剩下的空间全吃掉 */
  .content {
    flex: 1 1 0;
    background: #333;
    color: #fff;
  }

  .wrapper > div { text-align: center; }
</style>
</head>
<body>
  <div class="wrapper">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
  </div>
</body>
</html>

关键行与易错点

  • .wrapper 加了 display: flex 后宽度不变，还是跟父元素一样宽——伸缩容器没有自己特殊的显示特点，flex 就是块级，inline-flex 就是行内块级。
  • .left / .right 用 flex: 0 0 200px：不扩展、不收缩、主轴长度固定 200px。只写 width: 200px 也行，但显式写 0 0 更保险。
  • .content 用 flex: 1 1 0：容器主轴长度减掉左右各 200 之后全是富裕空间，扩展比例 1 → 全给它。视口变大变小，只有 content 变，左右永远 200。
  • 中间那个 1 写 0 也可以，别纠结，只是多数开发者习惯写 1。
  • HTML 顺序就是显示顺序，不用像浮动那样先写 content 再用 order 调整，这是 flex 相对浮动的优势。
  • * { margin: 0 } 必须加，否则 body 自带外边距，四周会有缝。

示例三：页面练习——header 高度固定、main 撑满剩余高度 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>伸缩盒页面练习</title>
<style>
  * { margin: 0; padding: 0; }

  /* html 的百分比高度参照视口，body 的百分比高度参照 html，两级都要写 */
  html, body { height: 100%; }

  body {
    display: flex;
    flex-direction: column;   /* 主轴竖着：header 上、main 下 */
    background: #eee;
  }

  /* 头部：高度固定 */
  .page-header {
    flex: 0 0 auto;           /* 不伸不缩，高度由自己的 height 决定 */
    height: 70px;
    padding: 0 15px;
    background: rgba(0, 0, 0, .7);
    display: flex;            /* header 自己也是伸缩容器 */
    justify-content: space-between;  /* 主轴：logo 和导航一左一右 */
    align-items: center;             /* 侧轴：垂直居中 */
  }

  /* logo：行内块底部有幽灵空白，转成块级规避 */
  .logo {
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
  }

  /* 导航项：a 是行内元素，宽高不生效，要改成行内块 */
  .page-nav a {
    display: inline-block;
    width: 85px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 8px;
    text-decoration: none;
    margin-left: 10px;
  }

  /* 主体：剩下多少要多少 */
  .page-main {
    flex: 1 1 0;
    display: flex;
    justify-content: center;   /* 让里面的 ul 水平居中 */
    align-items: center;       /* 让里面的 ul 垂直居中 */
  }

  .content-list {
    display: flex;
    justify-content: space-between;  /* 6 个 li 两端对齐 */
    width: 1000px;
    height: 210px;
    list-style: none;
  }

  .content-list li {
    width: 150px;
    background: #fff;
  }
</style>
</head>
<body>
  <header class="page-header">
    <a href="#" class="logo"></a>
    <nav class="page-nav">
      <a href="#">新学科</a>
      <a href="#">学科简介</a>
      <a href="#">上海校区</a>
    </nav>
  </header>

  <main class="page-main">
    <ul class="content-list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </main>
</body>
</html>

关键行与易错点

  • html, body { height: 100% }：只给 body 写 height: 100% 是无效的，因为父级 html 高度是 auto（默认高度被内容撑开，body 里没内容就是 0），百分比高度没有参照。
  • body 高度为 0 的坑：给 body 设背景图再加 background-size: cover 会出现“重复/错位”的怪现象，原因是 body 没有高度，浏览器在规则之外自己发挥。所以先给 html/body 高度，再谈背景图。背景图是样式不是内容，撑不开高度。
  • header 用 flex: 0 0 auto，main 用 flex: 1 1 0：头部高度恒为 70，主体把剩余空间全吃掉，窗口变高变矮只有 main 跟着变，不会出现滚动条。
  • header 里 justify-content: space-between 管主轴（一左一右），align-items: center 管侧轴（垂直居中）；没换行时用 align-items，换行了才考虑 align-content。
  • a 默认是行内元素，宽高、上下 margin 都不生效，必须 display: inline-block（或者把父级设成伸缩容器，让它变成伸缩项目）。
  • 导航项之间的间距直接 margin-left: 10px 就行，不必去算导航总宽再配 space-between。
  • 图片/行内块底部有幽灵空白，display: block 规避掉。

常见错误 ​

1. 把「伸缩容器」当成「伸缩项目」去判断默认宽高

  • 现象：问一个 display:flex 的 div 默认多宽，脱口而出“被内容撑开”，实际它和父元素一样宽。
  • 原因：只记住了“伸缩项目默认宽度被内容撑开”，没先确认元素此刻是容器还是项目；display:flex 本身不改变元素自己的显示特点（flex 相当于块级，inline-flex 相当于行内块）。
  • 修法：判断默认宽高固定走三步——先看显示模式（块级/行内/行内块/定位/浮动/伸缩项目），再套该模式的宽高规则，最后才看具体场景。容器在布局中只“发号施令”，所有特殊表现都发生在项目身上。

2. 把样式当内容，导致 body 高度算成 0 却不自知

  • 现象：给 body 设背景图 + cover + center，背景重复、错位、怎么调都不对。
  • 原因：body 里没有 HTML 元素，高度就是 0；背景图是样式不是内容，撑不开元素。高度为 0 时再让浏览器做定位和尺寸适配，已经超出规范约定，各浏览器自行其是。
  • 修法：先建立高度参照链 html, body { height:100% }，再谈背景的 size/position；同时明确“只有写在 HTML 里的才算内容”。

3. 开了自动换行还指望元素收缩

  • 现象：一行放不下时子项直接掉到下一行，等分/挤压效果消失。
  • 原因：flex-wrap: wrap 优先级更高——放不下就换行，根本不触发收缩。
  • 修法：要做等分、挤压、圣杯这类效果，保持单行（不换行）；需要多行排布时才用 wrap，并改用 align-content 处理行间关系。

4. 给行内元素（a、span）设宽高和圆角，毫无反应

  • 现象：导航里的 a 写了 width/height/border-radius，尺寸纹丝不动，只剩文字。
  • 原因：行内元素不识别宽高；想靠浮动解决又要处理清除浮动，得不偿失。
  • 修法：父级 display:flex，让它成为伸缩项目（兼具浮动与行内块的优点）；退一步可用 inline-block，但优先选 flex。

5. 嵌套伸缩容器后内部图片突然变大

  • 现象：给每个子项也设 display:flex 并把主轴改成纵向后，里面的图片被拉宽。
  • 原因：主轴变纵向后侧轴是横向，侧轴默认 align-items: stretch，图片被拉伸填满。
  • 修法：给该容器设 align-items: center（或给图片设固定宽度）。遇到“莫名变大/变小”，先问：哪个轴、默认值是什么。

6. 属性设错对象，写了等于没写

  • 现象：flex-grow、order、align-self 写在父级上无效；justify-content、align-items 写在子项上无效。
  • 原因：容器属性与项目属性混用。
  • 修法：动手前先分组——容器组（display / flex-direction / flex-wrap / flex-flow / justify-content / align-items / align-content），项目组（flex-basis / grow / shrink / flex / order / align-self）；align-self 里的 self 就是“自己给自己设”的记忆锚点。

练习 ​

1. 等分图标导航 用 flex 做一行 5 个「图标 + 文字」的导航块，要求：5 个块永远等分容器宽度、窗口缩放时一起变窄、图标与文字纵向排列且横向居中、文字下方无下划线。写完后回答：为什么给 a 加 border 后再设左右 padding，整行宽度没有变宽？

2. 上固定下自适应 实现页面结构：header 高度固定 70px，main 占据剩余全部高度，浏览器高度变化时 main 跟着变、不出现滚动条。要求不使用任何定位和 JS。

3. 圣杯布局（横向版） 左栏 200px、右栏 200px、中间自适应撑满剩余空间；把视口拖窄时，只有中间变窄，左右纹丝不动。用最少的三条 flex 相关声明完成。

4. 默认宽高判断训练 对下列元素逐一写出“默认宽度来源”和“默认高度来源”，并标注判断依据：① 未设任何样式的 div；② 设了 display:flex 的 div；③ 里面的 a；④ 空内容的 body；⑤ 里面只有一个 img 的 div。写错的那条，标出自己是卡在“显示模式”还是“谁是内容”这一步。

5. 响应式观察报告 打开苹果/微软官网，用开发者工具拖动视口宽度由宽到窄，记录至少 3 处发生变化的部位（导航、图片排布、页脚列数等），并回答：为什么它的网址不变、页面结构不变，却能适配不同屏幕？什么样的站点不适合这么做？

原视频对照 ​

#视频时长
1回顾19:37
2伸缩盒等分布局11:15
3伸缩盒页面练习0122:48
4伸缩盒页面练习02-header13:31
5伸缩盒页面练习03-main07:14
6伸缩盒实现圣杯布局07:55
7响应式页面介绍09:41

小结 ​

  1. 布局出问题，十有八九不是属性记不住，而是没先判断元素此刻的身份——容器还是项目、块级还是行内、是否脱离文档流。
  2. 凡是问“默认宽高是多少”，先想显示模式，再想“谁是我的父元素、谁是我的内容”，两步走完再下结论，别凭感觉。
  3. 伸缩容器本身没有独立显示特点，它只负责下发规则；所有可见的伸缩、拉伸、对齐效果都发生在伸缩项目身上。
  4. 判断效果是否生效，最快的路径是“写一写、打开看、再回头解释为什么”，而不是在脑子里硬推。
  5. 同一个效果往往有多种方案，能用 flex 就不要用浮动；嵌套伸缩（项目同时是容器）是 flex 布局的核心手法。
  6. 侧轴默认是 stretch，遇到元素“莫名被拉大”，第一反应应该是：主轴是哪个方向、侧轴默认值是什么、该不该改成 center。
  7. 响应式是一套代码、同一个网址随视口尺寸自动调整；做两套页面（PC 一个域名、移动一个域名）不叫响应式。内容量大的电商站不适合，产品介绍类、企业官网适合。
  8. 踩过的坑要归纳共性：把每一次“答错了”定位到具体是哪一步判断出错，比记住十句结论更有用。