1. 认识盒子模型

每个 HTML 元素都被看作一个矩形盒子。盒子模型由 内容（content）、 内边距（padding）、边框（border）、 外边距（margin） 组成。理解这四层结构是掌握 CSS 布局的基础。

💡 类比：手机盒子 —— 手机是内容，内衬是内边距，纸盒是边框，盒子之间的间距是外边距
统一的演示场景（浏览器 / 盒子 / 内容）
http://localhost:8000
margin
border
padding
内容 content
💡 三层结构：最外层是浏览器视口，中间是演示盒子（包含 margin/border/padding 三层嵌套），最内层是内容区。

2. <div> 标签

<div> 是 HTML 提供的块容器标签，用于划分网页模块。 HTML5 新增了语义化标签 <header> <nav> <section> <article> <aside> <footer>。

div 布局 vs HTML5 语义标签

HTML（div 实现）

<div id="header">
<div id="nav">
<div class="article">
<div class="section">
<div id="sidebar">
<div id="footer">

HTML5（语义标签）

<header>
<nav>
<article>
<section>
<aside>
<footer>

3. 边框属性 border

边框由 样式、宽度、颜色 三要素组成。可以统一设置，也可以按四边分别设置。 宽度必须在设置样式之后才生效。

边框演示（统一场景）
http://localhost:8000
margin
border
padding
内容 content
💡 演示重点：点击上方按钮，对比 border-style: none 和 border-color: transparent 的区别。
.box { border: 4px solid #3b82f6; }

边框设置

border-style: none（无边框）
上边框 border-top
右边框 border-right
下边框 border-bottom
左边框 border-left

4. 内边距 padding

内边距是内容与边框之间的距离。可以四边统一设置，也可以用简写分别设置上下左右。 padding 不允许使用负值。

内边距演示（大盒子套小盒子）
http://localhost:8000
margin
border
padding
内容区域
.box { padding: 20px; } /* 1值=四边 / 2值=上下 左右 / 3值=上 左右 下 / 4值=上 右 下 左 */

padding 设置

5. 外边距 margin

外边距是元素边框与相邻元素之间的距离。与 padding 不同，margin 允许负值。 常用 margin: 0 auto 实现块级元素水平居中。 重点：当两个相邻元素都设置了 margin 时，它们之间的距离取较大值，而不是相加。

外边距演示
http://localhost:8000
上方元素
左
margin
内容
右
下方元素
💡 当前：盒子四周有元素。粉色虚线框代表盒子的 margin，四周元素紧贴着粉色框，说明盒子与邻居之间的距离就是 margin 值。
.box { margin: 0; }

盒子自身的 margin

四周邻居的 margin

拖动滑块观察：盒子与邻居之间的距离取「盒子 margin」与「邻居 margin」的较大值。

💡 合并规则：盒子与邻居之间的距离取二者 margin 的较大值。

6. 盒子的宽与高

width 和 height 的含义取决于 box-sizing： content-box（默认）下 width/height 只作用于内容区， padding 和 border 会往外撑开，整体盒子尺寸变大； border-box 下 width/height 是内容 + padding + border 的总和， 整体尺寸锁定，padding 和 border 的厚度不变，内容区被压缩或撑大。 无论哪种模式，元素实际占用的总宽高都还要再加上 margin。

宽高演示（width / height 作用于哪一层由 box-sizing 决定）
http://localhost:8000
margin
content
实际占用空间计算（含 margin）

box-sizing 对比

💡 观察要点：
· content-box：拖动 width 时，content 区变化，padding 和 border 的厚度不变， 但它们会被 content 往外撑开，整体橙框变大或变小。
· border-box：拖动 width 时，橙框整体尺寸严格等于 width， padding 和 border 的厚度不变，但 content 区被压缩或撑大。
· 无论哪种模式，元素实际占用的总宽高都要再加上 margin × 2。

7. 背景属性 background

背景图片和背景颜色占据 content + padding 区域， 不包含 border 和 margin。可以设置图片的平铺方式、位置、大小和固定方式。

背景演示（滚动下方模拟浏览器观察 attachment 效果）
http://localhost:8000
内容 content
↓ 滚动区域 · 观察背景固定效果 ↓
.box { background-color: #1e3a5f; background-image: url("../img/bg.png"); background-repeat: no-repeat; background-position: center center; background-size: auto; background-attachment: scroll; }

背景控制

💡 二选一：点击上方选项按钮使用文本属性值（如 left top）； 拖动下方滑块使用百分比值（如 20% 30%），此时按钮全部取消选中， 但可以随时重新点击按钮切换回文本属性值。
💡 说明：两个滑块默认都在 0（最左），表示未设置 background-size。 只拖动宽度滑块 → 只设置宽度，高度等比缩放； 同时拖动宽度和高度 → 分别设置宽高； 两个都在 0 → 属性值为 auto（使用图片原始尺寸）。

🤖 AI 代码诊断导师