CSS 盒模型 — 边距与边框

理解 margin、border、padding、content 的关系 · 难度：入门 · +10XP

CSS 盒模型（Box Model）

CSS 盒模型是 CSS 布局的基石。在 HTML 中，每个元素都可以看作一个矩形的"盒子"，这个盒子由四层组成（从内到外）：内容（content） → 内边距（padding） → 边框（border） → 外边距（margin）。理解盒模型是做好页面布局的前提。

盒模型的四层结构

  ┌──────────────────────────────────┐
  │          margin（外边距）          │  最外层，与其他元素的距离
  │  ┌────────────────────────────┐  │
  │  │       border（边框）         │  │  可见的边框线
  │  │  ┌──────────────────────┐  │  │
  │  │  │    padding（内边距）    │  │  │  边框到内容的距离
  │  │  │  ┌────────────────┐  │  │  │
  │  │  │  │                │  │  │  │
  │  │  │  │ content（内容）  │  │  │  │
  │  │  │  │                │  │  │  │
  │  │  │  └────────────────┘  │  │  │
  │  │  └──────────────────────┘  │  │
  │  └────────────────────────────┘  │
  └──────────────────────────────────┘

盒模型两种计算模式

这是最重要的概念！CSS 有两种盒模型计算方式，由 box-sizing 属性控制：

对比维度	content-box（标准盒模型）	border-box（IE/替代盒模型）
box-sizing 值	box-sizing: content-box;	box-sizing: border-box;
是否为默认值	✅ 是（浏览器默认）	❌ 否（但强烈推荐使用）
width 的含义	仅指 content 的宽度	指 content + padding + border 的总宽度
最终元素宽度公式	width + padding-left + padding-right + border-left + border-right	width（padding 和 border 被包含在内）
设 width: 200px + padding: 20px + border: 5px	实际占 200 + 40 + 10 = 250px	实际占 200px
布局计算难度	???? 困难（宽高不等于直观大小）	???? 简单（宽高就是最终大小）

最佳实践：几乎所有现代项目都会在开头设置：

/* 全局使用 border-box，让布局计算变得更直观 */
*, *::before, *::after {
  box-sizing: border-box;
}

各层属性详解

1. content（内容区域）

.box {
  width: 300px;        /* 内容宽度 */
  height: 200px;       /* 内容高度 */
  min-width: 100px;    /* 最小宽度（响应式常用） */
  max-width: 100%;     /* 最大宽度 */
  overflow: auto;      /* 内容溢出时显示滚动条 */
}

2. padding（内边距）—— 内容与边框之间的空间

/* 四种简写方式 */
.box { padding: 20px; }              /* 四边都是 20px */
.box { padding: 20px 40px; }         /* 上下 20，左右 40 */
.box { padding: 10px 20px 30px 40px; } /* 上 右 下 左（顺时针！） */
.box { padding: 10px 20px 30px; }    /* 上 左右 下 */
/* 单个方向 */
.box { padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; }
/* 注意：padding 不能为负值；百分比相对于父元素宽度 */
.box { padding: 10%; }  /* 10% 是父元素宽度的 10%，不是高度的 10% */

3. border（边框）

/* 简写：border: 粗细 样式 颜色 */
.box { border: 2px solid #333; }
.box { border: 1px dashed #e74c3c; }
.box { border: 3px dotted #3498db; }
.box { border: none; }  /* 无边框 */
/* 单边边框 */
.box { border-bottom: 3px solid #2ecc71; }
/* border-radius —— 圆角（现代设计必备） */
.box { border-radius: 8px; }          /* 四角 8px */
.box { border-radius: 50%; }          /* 正圆 */
.box { border-radius: 10px 20px 30px 40px; } /* 左上 右上 右下 左下 */

4. margin（外边距）—— 元素之间的距离

/* 与 padding 语法相同 */
.box { margin: 20px; }
.box { margin: 20px auto; }     /* auto 实现水平居中 */
.box { margin: 10px 20px 30px; }
/* margin 的特殊行为 */
/* 1. 外边距折叠（Collapsing Margins） ← 重要！ */
<div style="margin-bottom: 30px;">上块</div>
<div style="margin-top: 20px;">下块</div>
<!-- 两块之间的间距是 30px（取最大值），而不是 30+20=50px -->
/* 2. margin 可以为负值 */
.box { margin-top: -10px; }  /* 向上移动 10px */
/* 3. 行内元素（inline）的上下 margin 无效 */
span { margin-top: 100px; }  /* ❌ 不生效 */
span { display: inline-block; margin-top: 100px; }  /* ✅ 生效 */
/* 4. margin: auto 水平居中 —— 最常用的居中技巧之一 */
.container {
  width: 960px;
  margin: 0 auto;  /* 上下 0，左右自动 → 水平居中 */
}

外边距折叠详解

外边距折叠（Margin Collapsing）是 CSS 中最容易让人困惑的行为之一：

场景	行为	示例
相邻兄弟元素	上元素的 margin-bottom 和下元素的 margin-top 取最大值	30px + 20px = 30px
父子元素之间	如果父元素没有 border/padding/overflow 阻隔，子元素的 margin-top 会"穿透"到父元素	子 margin-top: 20px → 父和子一起下移 20px
空元素	空元素的 margin-top 和 margin-bottom 也会折叠	40px + 30px = 40px

/* 防止外边距折叠的方法 */
.parent {
  overflow: hidden;    /* 方法 1：创建 BFC */
  /* 或 */
  border: 1px solid transparent;  /* 方法 2：加透明边框 */
  /* 或 */
  padding: 1px;         /* 方法 3：加内边距 */
  /* 或 */
  display: flex;        /* 方法 4：Flex 布局 */
}

实战：卡片组件（盒模型完整应用）

<style>
.card {
  /* content */
  width: 300px;
  /* padding */
  padding: 24px;
  /* border */
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  /* margin */
  margin: 16px;
  /* 背景从 padding 区域开始（默认） */
  background: white;
  /* 关键：使用 border-box */
  box-sizing: border-box;
  /* 阴影 */
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  /* 过渡动画 */
  transition: box-shadow 0.3s, transform 0.3s;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transform: translateY(-4px);
}
</style>

盒模型调试技巧

/* 开发时的调试神器 —— 给所有元素加半透明轮廓 */
* {
  outline: 1px solid rgba(255, 0, 0, 0.3) !important;
}
/* 或使用浏览器 DevTools：F12 → Elements → Computed 标签页
   可以直观看到每个元素的 content / padding / border / margin 数值 */

???? 练习任务

1. 分别用 content-box 和 border-box 创建两个宽高相同的盒子，对比它们实际占用的空间
2. 创建一个卡片组件（产品展示），综合运用 padding、border、margin、border-radius、box-shadow
3. 实现两个相邻段落，设置不同的 margin-bottom 和 margin-top，观察外边距折叠现象
4. 用 margin: 0 auto 居中一个固定宽度的容器
5. 用浏览器 DevTools 的 Computed 面板查看任意网页元素的盒模型数值
6. 尝试用 overflow: hidden 阻止父子元素间的外边距穿透