p2p贷款网站开发网站建设中敬请期待 图片
第二卷：盒模型的奥秘
章节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);
}