盒模型（CSS布局基础，必学重点）

9.1 盒模型的定义

什么是盒模型？

在CSS中，所有的HTML元素都可以看作是一个盒子。这个盒子由四个部分组成：

内容区（Content）：元素的核心内容，如文字、图片
内边距（Padding）：内容与边框之间的空间
边框（Border）：包围内边距和内容的边框
外边距（Margin）：盒子与其他盒子之间的空间

盒模型示意图

┌─────────────────────────────────────┐
│              Margin                 │
│   ┌─────────────────────────────┐   │
│   │           Border            │   │
│   │   ┌─────────────────────┐   │   │
│   │   │       Padding       │   │   │
│   │   │   ┌─────────────┐   │   │   │
│   │   │   │   Content   │   │   │   │
│   │   │   └─────────────┘   │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘

9.2 盒模型组成详解

内容区（Content）

定义：元素的核心内容区域。

相关属性：

width：设置内容区的宽度
height：设置内容区的高度

示例：

css

.content-box {
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
}

内边距（Padding）

定义：内容与边框之间的空间。

语法：

css

/* 四个方向统一设置 */
padding: 20px;

/* 上下 左右 */
padding: 20px 30px;

/* 上 左右 下 */
padding: 20px 30px 20px;

/* 上 右 下 左 */
padding: 20px 30px 20px 30px;

/* 单独设置 */
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;

示例：

css

.padding-box {
  padding: 20px;
  background-color: #e3f2fd;
}

边框（Border）

定义：包围内边距和内容的边框。

语法：

css

border: 宽度 样式 颜色;

示例：

css

.border-box {
  border: 2px solid #333;
}

外边距（Margin）

定义：盒子与其他盒子之间的空间。

语法：

css

/* 四个方向统一设置 */
margin: 20px;

/* 上下 左右 */
margin: 20px auto;

/* 上 左右 下 */
margin: 20px auto 30px;

/* 上 右 下 左 */
margin: 10px 20px 30px 40px;

/* 单独设置 */
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 30px;

示例：

css

.margin-box {
  margin: 20px;
  background-color: #fff3e0;
}

9.3 盒模型的两种模式

标准盒模型（content-box）

特点：

width 和 height 只包含内容区
元素的实际宽度 = width + padding + border

示例：

css

.standard-box {
  box-sizing: content-box; /* 默认值 */
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  /* 实际宽度 = 300 + 20*2 + 2*2 = 344px */
}

怪异盒模型（border-box）

特点：

width 和 height 包含内容区、内边距和边框
元素的实际宽度 = width

示例：

css

.border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  /* 实际宽度 = 300px */
  /* 内容区宽度 = 300 - 20*2 - 2*2 = 256px */
}

9.4 外边距合并问题

什么是外边距合并？

当两个垂直相邻的块级元素相遇时，它们的外边距会合并成一个外边距，取两者中较大的值。

示例

css

.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
}
/* 实际间距 = 30px，而不是50px */

解决方案

使用padding代替margin
给父元素添加border或padding
使用BFC（块级格式化上下文）

9.5 实战：用盒模型布局简单的卡片、按钮

实战目标

使用盒模型创建一个卡片布局，展示盒模型的应用。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS盒模型实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS盒模型实战</h1>
    
    <!-- 卡片示例 -->
    <div class="card">
      <h2>产品卡片</h2>
      <p>这是一个使用盒模型布局的卡片示例。卡片包含内容区、内边距、边框和外边距。</p>
      <button class="btn">了解更多</button>
    </div>
    
    <!-- 按钮示例 -->
    <div class="buttons">
      <h2>按钮示例</h2>
      <button class="btn btn-small">小按钮</button>
      <button class="btn btn-medium">中按钮</button>
      <button class="btn btn-large">大按钮</button>
    </div>
  </div>
</body>
</html>

添加CSS样式：

css

/* 全局设置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 50px 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 40px;
}

h2 {
  color: #555;
  margin-bottom: 20px;
}

/* 卡片样式 */
.card {
  /* 内容区 */
  width: 100%;
  max-width: 400px;
  
  /* 内边距 */
  padding: 30px;
  
  /* 边框 */
  border: 2px solid #ddd;
  border-radius: 10px;
  
  /* 外边距 */
  margin: 0 auto 40px;
  
  /* 背景 */
  background-color: white;
  
  /* 阴影 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card h2 {
  color: #333;
  margin-bottom: 15px;
}

.card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* 按钮样式 */
.buttons {
  text-align: center;
}

.btn {
  /* 内边距 */
  padding: 12px 24px;
  
  /* 边框 */
  border: none;
  border-radius: 5px;
  
  /* 外边距 */
  margin: 10px;
  
  /* 背景 */
  background-color: #3498db;
  color: white;
  
  /* 文字 */
  font-size: 16px;
  cursor: pointer;
  
  /* 过渡 */
  transition: all 0.3s;
}

.btn:hover {
  background-color: #2980b9;
}

.btn-small {
  padding: 8px 16px;
  font-size: 14px;
}

.btn-medium {
  padding: 12px 24px;
  font-size: 16px;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

运行页面：在浏览器中打开文件，观察效果

预期效果

卡片：包含内容区、内边距、边框、外边距和阴影
按钮：不同尺寸的按钮，展示内边距的应用

盒模型（CSS布局基础，必学重点） ​

9.1 盒模型的定义 ​

什么是盒模型？ ​

盒模型示意图 ​

9.2 盒模型组成详解 ​

内容区（Content） ​

内边距（Padding） ​

边框（Border） ​

外边距（Margin） ​

9.3 盒模型的两种模式 ​

标准盒模型（content-box） ​

怪异盒模型（border-box） ​

推荐使用border-box ​

9.4 外边距合并问题 ​

什么是外边距合并？ ​

示例 ​

解决方案 ​

9.5 实战：用盒模型布局简单的卡片、按钮 ​

实战目标 ​

实战步骤 ​

预期效果 ​