盒模型是CSS布局的基础，每个HTML元素都可视为一个矩形盒子，由内向外分为content（内容区）、padding（内边距）、border（边框）、margin（外边距） 四部分。

盒模型计算规则

• 标准盒模型（默认，box-sizing: content-box）：
  元素总宽度 = content width + padding-left + padding-right + border-left + border-right
  元素总高度 = content height + padding-top + padding-bottom + border-top + border-bottom

• IE盒模型（box-sizing: border-box）：
  元素总宽度 = content width（包含padding和border）
  元素总高度 = content height（包含padding和border）

案例2-4：卡片式布局基础

<div class="card">
<h3 class="card-title">产品卡片</h3>
<p class="card-content">这是一个基础的卡片式布局示例，用于展示盒模型属性的作用。</p>
</div>

<style>
.card {
width: 300px; /* 内容区宽度 */
padding: 20px; /* 内边距：上下左右各20px */
margin: 15px auto; /* 外边距：上下15px，水平居中 */
border: 1px solid #e0e0e0; /* 边框：1px灰色实线 */
border-radius: 8px; /* 圆角边框 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
box-sizing: border-box; /* 使用IE盒模型计算尺寸 */
}
.card-title {
margin: 0 0 10px 0; /* 标题下外边距10px，消除默认margin */
color: #333;
}
.card-content {
margin: 0; /* 消除段落默认margin */
color: #666;
line-height: 1.5;
}
</style>

注释：

• padding: 20px使内容与边框保持20px间距，增加内部留白；
• margin: 15px auto控制卡片与外部元素的距离，auto实现水平居中；
• box-sizing: border-box确保width: 300px包含padding和border，避免元素实际尺寸超出预期；
• 若未设置box-sizing，标准盒模型下卡片总宽度 = 300 + 202 + 12 = 342px。