前端码农

Appearance

盒模型（Box Model） ​

盒模型是 CSS 布局的基石：每个元素本质上都是一个由内到外的矩形盒子。理解 content / padding / border / margin 四层结构，以及 box-sizing 如何改变「宽高到底算哪一层」，是精确控制布局、避免尺寸计算失误的前提。本篇从结构、计算规则到实战示例，帮你彻底吃透盒模型。

导航目录 ​

一、原理篇 ​

二、实战篇 ​

基本概念与四层结构 ​

在 CSS 中，一个元素的「盒子」由内到外依次包含：内容（content）→ 内边距（padding）→ 边框（border）→ 外边距（margin）。

核心概念：谁属于「盒子本体」？

  • padding / border 会影响盒子本体的尺寸：它们撑大元素占据的可视区域。
  • margin 不属于盒子本体：它是与其他元素/容器之间的间距，影响布局占位，但不改变盒子本体的边框大小。
  • 一句话记忆：margin 管「外部间隔」，padding/border 管「内部占位」。

盒模型的四层从内到外可视化如下：

text
┌─────────────────────────────────────────┐
│ margin（外边距·布局间隔）                 │
│  ┌───────────────────────────────────┐  │
│  │ border（边框）                     │  │
│  │  ┌─────────────────────────────┐  │  │
│  │  │ padding（内边距）            │  │  │
│  │  │  ┌───────────────────────┐  │  │  │
│  │  │  │ content（内容区        │  │  │  │
│  │  │  │ width/height）         │  │  │  │
│  │  │  └───────────────────────┘  │  │  │
│  │  └─────────────────────────────┘  │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

尺寸计算（content-box vs border-box） ​

box-sizing 决定 width/height 指的是哪一层的尺寸，这是盒模型最关键的分歧点：

box-sizingwidth/height 含义边框盒总宽度直觉性
content-box（默认）仅 contentcontent + padding + border较反直觉
border-boxcontent + padding + border就等于设置的 width符合直觉，最常用

快速记忆

  • 默认 content-box：设置的宽高是「内容区」，加上 padding/border 后实际会更宽。
  • border-box：设置的宽高就是「边框区」，加 padding/border 不再撑大——更符合直觉，也更常用。
  • 现代项目常用全局重置：*, *::before, *::after { box-sizing: border-box; }

示例：同一组 padding/border 的两种结果 ​

下面示例中，width 都是 100px，但两种 box-sizing 的最终边框盒宽度不同。

html
<style>
  .box {
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px;
    background: #f7f7f7;
  }
  .contentBox {
    box-sizing: content-box; /* 默认值，可不写 */
  }
  .borderBox {
    box-sizing: border-box;
  }
</style>

<div class="box contentBox">content-box</div>
<div class="box borderBox">border-box</div>

计算结果：

  • content-box（默认）
    • width: 100px = content 宽度
    • 边框盒总宽度：100 + 10 + 10 + 1 + 1 = 122px
  • border-box
    • width: 100px = 边框盒宽度
    • 边框盒总宽度：100px

margin 不参与盒子本体宽度

margin: 10px 不参与上面的「盒子本体宽度」计算，但会在盒子外侧产生 10px 间隔，从而影响布局占位与元素间距。切勿把 margin 也算进 border-box 总宽度里。

结语：先分清「哪一层」再算尺寸

盒模型的所有困惑，几乎都源于「不清楚 width 算的是哪一层」。记住 border-box 让宽高所见即所得，再配合全局重置，绝大多数布局尺寸问题都能迎刃而解。