单元五 · 盒子模型与布局

网页布局的本质，是摆盒子。本单元是学时最多的一章（14 学时）：盒子模型、浮动与清除、定位与 z-index、阴影渐变、过渡变形、Web 字体图标。盒子模型是整个 CSS 布局的地基——不懂它，margin/padding 永远算不清。

一、知识准备：每个元素都是盒子

content

+padding

+border

+margin

生活类比：快递盒

商品是 content；气泡膜是 padding（内容到盒壁的距离）；纸箱是 border；盒子和隔壁盒子的空隙是 margin。总占地 = 四层之和。新手常问「为什么宽 100 实际 120」——多半忘了 padding/border 要算进去（除非 box-sizing:border-box）。

标准盒模型：width 只算 content；实际占位 = width + padding + border + margin。

border-box：box-sizing:border-box 让 width 包含 padding+border，布局更好算，生产强烈推荐全局设置。

float：元素「浮」到一侧，文字环绕；父元素会「塌高」，需 clear:both 或 overflow 清除。

position：relative（相对原位）/ absolute（相对父）/ fixed（钉在视口）/ z-index 控制叠放层级。

二、实战演练：双栏卡片布局

文件： u5/columns.html

columns.html

<style>
  * { box-sizing:border-box; }          /* 全局改成 border-box */
  .row::after { content:""; display:block; clear:both; }
  .col { float:left; width:50%; padding:16px; }
  .col h3 { color:#b04a2c; }
  .btn { background:#b04a2c; color:#fff; padding:8px 16px;
         border-radius:8px; transition:.2s; }
  .btn:hover { box-shadow:0 6px 16px rgba(176,74,44,.3); }
</style>

<div class="row">
  <div class="col"><h3>唐诗</h3><p>…</p><a class="btn">进入</a></div>
  <div class="col"><h3>宋词</h3><p>…</p><a class="btn">进入</a></div>
</div>

效果预览运行结果

显示：两栏等高并排，按钮悬停浮现阴影（transition 平滑）。

故意写错：父 .row 不加 clear 清除浮动——父容器高度塌成 0，后面元素「跑上来叠一起」。这是布局最常见的幽灵 bug，记住「浮了就得清」。

三、强化训练

1设 box-sizing:border-box 后，width:100px + padding:20px 的实际占位宽是多少？

2子元素 float 后父容器高度塌陷，列举两种清除方法。

3absolute 定位的参照物是什么？z-index 在什么前提下才生效？

四、课后实训

作业：做一个 gallery.html 三栏卡片画廊：每张卡含图（色块占位）、标题、描述、按钮；hover 用 transition 上浮 + 阴影；加一个 fixed 的「回到顶部」角标（z-index 最高）。

本单元小结

盒子四层：content / padding / border / margin，优先 border-box。
浮动必清：float 后父容器塌陷，用 ::after + clear 或 overflow。
定位叠层：absolute 参照已定位父级，z-index 仅对定位元素生效。
质感三件套：shadow / gradient / transition 让页面从「能看」到「好看」。

单元五 · 盒子模型与布局

一、知识准备：每个元素都是盒子

生活类比：快递盒

二、实战演练：双栏卡片布局

三、强化训练

四、课后实训

本单元小结

📝 本节自测