第5章 用CSS精确控制样式

类选择器与盒模型是专业排版的分水岭 ｜ 课型：实习课 ｜ 建议课时：2节

🏠 返回总目录 / 第5章

🎯 学习目标

知识目标

  • 掌握类选择器、ID选择器、后代选择器的使用与优先级
  • 深入理解盒模型：content/padding/border/margin
  • 掌握阴影、圆角、透明度等设计细节属性

能力目标

  • 能使用外部样式表实现样式与结构分离
  • 能用盒模型精确控制元素间距
  • 能运用calc()等数学函数进行动态计算

德育目标

  • 培养"像素级"精细打磨的工匠精神
  • 理解分离关注点（结构/样式）的工程规范

教学重点

  • 类选择器与优先级
  • 盒模型四层的真实占用
  • 外部样式表的组织

教学难点

  • box-sizing: border-box的意义
  • margin重叠（塌陷）现象
  • 优先级计算规则

💻 实例演示1个实例 · 可在线运行

▶ 盒模型互动实验室

拖动滑块实时调整padding/border/margin，直观看到盒模型变化与总尺寸计算。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，观察三层彩色区域的嵌套关系
  2. 拖动padding滑块，观察青色区域变化
  3. 拖动border滑块，观察边框粗细变化
  4. 拖动margin滑块，观察橙色区域变化
  5. 阅读底部总宽度计算公式，验证160+2×(p+b+m)
  6. 用开发者工具选中content元素，对照盒模型图

效果观察点

  • margin在border之外，产生元素间距离
  • padding在border之内，撑开内容与边框的距离
  • content-box下总尺寸随padding/border增大而增大
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒模型互动实验室</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; max-width: 720px; margin: 30px auto; padding: 0 16px; color: #1f2a33; }
  .lab { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
  .margin-area { background: #fdeeda; padding: var(--m, 20px); }
  .border-area { background: #e7f7f4; border: var(--b, 4px) solid #0f8c7f; padding: var(--p, 20px); }
  .content { background: #123a52; color: #fff; width: 160px; height: 80px;
             display: flex; align-items: center; justify-content: center; }
  label { display: block; margin: 12px 0; }
  output { font-weight: bold; color: #c77728; }
  #result { background: #f2f6f8; padding: 12px; border-radius: 8px; margin-top: 16px; }
</style>
</head>
<body>
  <h1>盒模型互动实验室</h1>
  <div class="lab">
    <div class="margin-area" title="margin">
      <div class="border-area" title="border+padding">
        <div class="content">content 160×80</div>
      </div>
    </div>
    <div>
      <label>padding: <input type="range" id="p" min="0" max="60" value="20"> <output id="pv">20</output>px</label>
      <label>border: <input type="range" id="b" min="0" max="20" value="4"> <output id="bv">4</output>px</label>
      <label>margin: <input type="range" id="m" min="0" max="60" value="20"> <output id="mv">20</output>px</label>
    </div>
  </div>
  <div id="result"></div>
<script>
  const $ = id => document.getElementById(id);
  function update() {
    const p = +$('p').value, b = +$('b').value, m = +$('m').value;
    document.querySelector('.margin-area').style.setProperty('--m', m + 'px');
    document.querySelector('.border-area').style.setProperty('--b', b + 'px');
    document.querySelector('.border-area').style.setProperty('--p', p + 'px');
    $('pv').textContent = p; $('bv').textContent = b; $('mv').textContent = m;
    const total = 160 + 2 * (p + b + m);
    $('result').textContent = '元素总宽度 = 160 + 2×(' + p + '+' + b + '+' + m + ') = ' + total + ' px（content-box算法）';
  }
  ['p','b','m'].forEach(id => $(id).addEventListener('input', update));
  update();
</script>
</body>
</html>

📋 实习任务书

任务目标：用外部样式表重写"我的爱好"页面，精确控制间距与视觉细节

任务内容与评分
任务1：创建style.css并正确link引入（15分）
任务2：用类选择器为三个爱好卡片设置相同样式（20分）
任务3：用盒模型知识使卡片内边距20px、间距24px（25分）
任务4：添加圆角12px与柔和阴影（20分）
任务5：用开发者工具截图一个元素的盒模型图并标注四层（20分）

自我评价

📚 课后作业与预习