一、知识回顾（读完直接做下面的实践题）#

1. 盒子模型：页面中所有的元素（标签）都可以看做一个盒子，由盒子把元素包含在一个矩形区域内，通过盒子的视角更方便地进行页面布局
2. 盒子模型的组成（由内向外）：内容区域 content → 内边距区域 padding → 边框区域 border → 外边距区域 margin
3. <div>：一行只显示一个（独占一行），宽度默认是父元素的宽度、高度默认由内容撑开，可以设置宽高；<span>：一行可以显示多个，宽高默认由内容撑开，不可以设置宽高
4. padding/margin 简写：四个值 = 上 右 下 左；三个值 = 上 左右 下；两个值 = 上下 左右；一个值 = 四个方向都一样
5. border 的写法是”宽度 样式 颜色”，如 border: 20px solid #6bd5d7（实线用 solid），不能只写一个数值
6. 只改某一个方向时，在属性名后加方位后缀：padding-top、padding-left、padding-right、padding-bottom，margin 和 border 同理
7. box-sizing: content-box（默认）：width/height 只指内容区域，元素总宽 = width + 左右 padding + 左右 border（会被撑大）
8. box-sizing: border-box：width/height 指的是内容 + 内边距 + 边框的总和，写了多少就是多少（不会被撑大）
9. 水平居中套路：先给元素明确的宽度（width: 70% 或固定像素），再写 margin: 0 auto（或 margin-left: auto + margin-right: auto）让左右外边距均分剩余空间
10. margin: 0 auto 里的 auto 只在左右方向能居中；行内元素（<span>）不能设置宽度，所以居中套路对它无效

二、裸写题#

• 2-1 让整块内容占版面 70% 并居中 页面里有一个装着新闻内容的容器（<div id="content-container">），要求：它占浏览器宽度的 70%，并且左右居中显示（上下不留额外间距）。 （练习文件 test_08_版面居中.html 里有页面内容，样式写在 head 的样式区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：居中 = 先定宽度，再把左右两边剩下的空间均分给它 二级 · 方法：宽度用 width（百分比）；左右均分用 margin 的两值简写（上下一个值、左右一个值），左右那个值写 auto 三级 · 骨架：#content-container { width: ____; margin: ____ auto; }

  参考答案（做完再点开）

  1
  <style>
  2
    #content-container {
  3
      width: 70%;      /* 占版面 70% */
  4
      margin: 0 auto;  /* 上下 0，左右自动均分 —— 水平居中 */
  5
    }
  6
  </style>

  对照课程 08. 央视新闻-整体布局.html。等价写法：margin-left: auto; margin-right: auto;（PPT 上演示的就是这种）。要点是必须先有宽度，auto 才有剩余空间可均分。

• 2-2 算一算：加完内边距和边框，盒子总宽变成多少 有一个盒子样式写着 width: 200px; padding: 20px; border: 2px solid #05a5d2;（没有写 box-sizing）。 要求做两件事：

  1. 先在心里算出这个盒子在页面上实际占多宽，然后动手验证（浏览器 F12 的”计算样式”或元素盒模型面板能看到总宽）
  2. 如果希望总宽就是 200px 不被撑大，加一条属性把计算方式改掉，再验证一次 （练习文件 test_08_内边距与边框.html 里有这个盒子。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：width 默认只管”内容区”，内边距和边框是额外加上去的；想让它”包在 200px 里”就得换一种计算方式 二级 · 方法：默认计算方式是 content-box；改用属性 box-sizing，值 border-box 三级 · 骨架：总宽 = width + 左右 padding + 左右 border；改造后 ____: ____;

  参考答案（做完再点开）

  1
  /* 第 1 问：默认 content-box 下 */
  2
  /* 总宽 = 200 + 20×2 + 2×2 = 244px；总高 = 100 + 40 + 4 = 144px */
  3
  
  4
  /* 第 2 问：改成 border-box，宽高含内边距与边框 */
  5
  .box {
  6
    width: 200px;
  7
    height: 100px;
  8
    padding: 20px;
  9
    border: 2px solid #05a5d2;
  10
    box-sizing: border-box;   /* 总宽就固定是 200px，内容区剩 200-40-4 = 156px */
  11
  }

  验证办法：浏览器里选中元素看”盒模型”面板——content-box 时面板上的总宽是 244（内容 200 + 内边距 40 + 边框 4）；border-box 时总宽 200（内容区 156）。

• 2-3 用最少的代码给盒子四边留出不同间距 一个盒子的需求是：上面留 10px、左右留 20px、下面留 30px 的外边距，同时内边距四边都是 15px。要求每个属性各写一条声明（不许拆成 margin-top 那样的四行）。 （练习文件 test_08_外边距简写.html 里有这个盒子，它的边框是 1px 实线灰色。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：三个方向的值不一样，数一数需要几个值才能表达；四边一样的最省事 二级 · 方法：简写顺序是”从上开始顺时针”：上 右 下 左，中间的值同时管左右；四边相同写一个值 三级 · 骨架：margin: ____ ____ ____; / padding: ____;

  参考答案（做完再点开）

  1
  .box {
  2
    margin: 10px 20px 30px;   /* 上 10、左右 20、下 30 */
  3
    padding: 15px;            /* 四边都是 15px */
  4
    border: 1px solid #b2b2b2;
  5
  }

  三个值的规则：第 1 个给上、第 2 个给左右、第 3 个给下。要写成四个值就是 margin: 10px 20px 30px 20px;（上右下左），效果完全一样——三个值只是省掉”下和上相同时”的重复。

• 2-4 只给左侧留出缩进 有一段引用的文字（<p class="quote">），要求：只在左边留 40px 的空白（把文字往右推），右边、上下都不动；再给它只加一条下边框（1px 实线浅灰 #b2b2b2）。 （练习文件 test_08_方位后缀.html 里有这段文字。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：只要一边有效果，那就别用简写（简写会同时管四个方向），改成”属性名 + 方位” 二级 · 方法：内边距的左边是 padding-left；边框的下边是 border-bottom，格式仍是”宽度 样式 颜色” 三级 · 骨架：.quote { ____-____: 40px; ____-____: 1px solid ____; }

  参考答案（做完再点开）

  1
  .quote {
  2
    padding-left: 40px;                     /* 只在左内侧留 40px */
  3
    border-bottom: 1px solid #b2b2b2;       /* 只加一条下边框 */
  4
  }

  方位后缀有八种：padding-top/right/bottom/left、margin-…、border-…。PPT 的原话是”如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 –位置”。

三、综合题#

• 3-1 给新闻页面做一块”卡片” 练习文件里准备好了页面骨架：一个内容容器（#content-container）里面放一行标题、一段正文，正文后面还有一张”延伸阅读卡片”（<div class="card">）。按步骤做：

  1. 整体居中：让 #content-container 占版面 70%，上下不留间距、左右居中
  2. 卡片内部留白：卡片四边内边距都是 20px
  3. 卡片边框：加 2px 实线边框、颜色 #05a5d2
  4. 卡片与上方正文隔开：上外边距 30px、左右 0、下外边距 30px（用一条三值简写）
  5. 锁住卡片尺寸：把卡片的宽高计算方式改成”含内边距和边框”，让 width: 600px 就是实际占的宽度
  6. 验证：做完打开浏览器 F12 检查两件事——内容容器左右两侧留白是否相等；卡片在改成第 5 步之前和之后的总宽分别是 644px 和 600px（4+5 两步前后的差别）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：第 1 步用”定宽 + 左右 auto”；第 2~4 步都在给这个盒子加”层”——内边距、边框、外边距；第 5 步换宽高的计算方式 二级 · 方法：width + margin: 0 auto；padding 一个值；border: 2px solid #05a5d2；margin: 30px 0… 注意第 4 步要求上下都是 30 但左右为 0，需要用三值简写；box-sizing: border-box 三级 · 骨架：#content-container { width: ____; margin: 0 ____; } / .card { padding: ____; border: ____ solid ____; margin: ____ ____ ____; box-sizing: ____; width: 600px; }

  参考答案（做完再点开）

  1
  <style>
  2
    /* 1. 整体版面占 70% 并居中 */
  3
    #content-container {
  4
      width: 70%;
  5
      margin: 0 auto;
  6
    }
  7
  
  8
    /* 2~5. 延伸阅读卡片 */
  9
    .card {
  10
      width: 600px;
  11
      padding: 20px;                  /* 四边内边距 20px */
  12
      border: 2px solid #05a5d2;      /* 2px 实线边框 */
  13
      margin: 30px 0 30px;            /* 上 30、左右 0、下 30 */
  14
      box-sizing: border-box;         /* 600px 就是实际总宽 */
  15
    }
  16
  </style>

  显示更多显示更少

  第 6 步的答案：不写 box-sizing 时（content-box）卡片总宽 = 600 + 20×2 + 2×2 = 644px；写了 border-box 之后总宽回到 600px，内容区 556px。#content-container 的左右留白相等（各占 (100% - 70%) / 2）。 margin: 30px 0 30px 也可以写成 margin-top: 30px; margin-bottom: 30px;——但用三值简写一行更符合”能简写就简写”的习惯。