第二章：盒模型的奥秘

第二卷：盒模型的奥秘

章节3：魔法盒的解剖课

教学目标：掌握盒模型（box model）四大组成部分（content/padding/border/margin），理解box-sizing对布局的颠覆性影响

魔法场景

第一幕：肿胀的魔法书
你在整理魔法图书馆时，发现一本《上古元素法典》被施加了奇怪的魔法——书页向外膨胀，几乎要撑破书皮。仔细查看HTML代码，发现是过度使用padding导致的：

<div class="book">
  <h2>元素的秘密</h2>
  <p>所有元素都有...（文字被挤压变形）</p>
</div>

第二幕：解剖实验室
导师用X光魔法展示元素内部结构：

不同部分的说明：

• Margin(外边距) - 是盒子与其他元素之间的空间，外边距是透明的。
• Border(边框) - 围绕在内边距之外的边框。
• Padding(内边距) - 内容与边框之间的空间，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

揭示默认content-box的陷阱：

.book {
   
  width: 600px;
  padding: 50px; /* 实际宽度变成700px */
}

盒模型有两种类型：
标准盒模型：width 和 hight 只包含内容区域，内边距、边框和外边距都在这个宽度和高度之外。
IE盒模型：也叫怪异盒模型，width 和 hight 包含内容区域、内边距和边框，但外边距在这个宽度和高度之外。

第三幕：体态矫正术
标准盒模型和 IE 盒模型可以通过 box-sizing 来切抽盒模型。你可以用box-sizing: border-box修复古籍：

.book {
   
  box-sizing: border-box; /* 激活包裹魔法 */
  width: 600px; /* 总宽度固定 */
  padding: 30px;
  border: 10px solid #8B4513;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0,0,0,0.3);
}