ZhenYu's 知识库

外观

盒模型与盒尺寸

约 1261 字大约 4 分钟

cssbox-model

2026-04-16

1. 盒模型基本概念

盒模型是 CSS 布局的基础，每个元素都被看作一个矩形盒子，由内到外依次包括：

层级说明
content内容区域，存放文本或图片
padding内边距，位于 content 与 border 之间
border边框，围绕 padding 和 content
margin外边距，位于 border 外部，隔开相邻元素
┌───────────────────────────────┐
│           margin              │
│  ┌─────────────────────────┐   │
│  │         border          │   │
│  │  ┌───────────────────┐   │   │
│  │  │      padding      │   │   │
│  │  │  ┌─────────────┐   │   │   │
│  │  │  │   content   │   │   │   │
│  │  │  └─────────────┘   │   │   │
│  │  └───────────────────┘   │   │
│  └─────────────────────────┘   │
└───────────────────────────────┘

2. 标准盒模型 vs IE 传统盒模型

W3C 标准盒模型（content-box）

box-sizing: content-box（默认值）

  • width 和 height 只包含 content 内容区域
  • padding 和 border 会增加元素的总尺寸
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 10px solid #333;
    /* 实际占据宽度 = 200 + 20*2 + 10*2 = 260px */
}

IE 传统盒模型（border-box）

box-sizing: border-box

  • width 和 height 包含 content、padding、border
  • 总尺寸等于设定的 width/height
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 10px solid #333;
    /* 实际 content 宽度 = 200 - 20*2 - 10*2 = 140px */
}

3. box-sizing 最佳实践

推荐使用 border-box 模型，可以更直观地控制元素尺寸：

/* 全局设置，推荐放在 CSS reset 或 base 中 */
* {
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: inherit;
}

优势：

  • 设置 width 后，padding 和 border 不会撑大元素
  • 更符合直觉，减少布局计算错误
  • 适合响应式设计，百分比宽度配合固定 padding

4. width / height 细节

content-box vs border-box 对比

/* 标准盒模型 */
.standard {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 10px solid red;
    /* 总宽度 = 200 + 40 + 20 = 260px */
}

/* IE 盒模型 */
.ie {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 10px solid blue;
    /* 总宽度 = 200px（content = 200 - 40 - 20 = 140px） */
}

min-width / max-width / min-height / max-height

限制元素的尺寸范围，常用于自适应布局：

.container {
    width: 100%;
    max-width: 1200px;      /* 最大宽度 */
    min-width: 320px;       /* 最小宽度（移动端适配） */
}

.card {
    min-height: 200px;      /* 最小高度 */
    max-height: 400px;      /* 最大高度 */
}

.image-wrapper {
    width: 100%;
    height: auto;
    max-width: 100%;        /* 图片不超过原始尺寸 */
}

应用场景：

  • 防止文字过少时布局塌陷
  • 防止图片过大破坏布局
  • 限制输入框、按钮等元素的尺寸范围

5. margin 细节

margin collapse（外边距合并）

垂直方向上，相邻元素的外边距会合并为一个，取较大值。

三种情况：

  1. 相邻兄弟元素
.box1 {
    margin-bottom: 20px;
}
.box2 {
    margin-top: 30px;
}
/* 实际间距 = max(20px, 30px) = 30px */
  1. 父子元素（没有 padding/border/overflow 隔开）
.parent {
    margin-top: 20px;
}
.child {
    margin-top: 10px;
}
/* 实际间距 = max(20px, 10px) = 20px，合并到父元素 */
  1. 空块级元素
.parent {
    margin-top: 20px;
    margin-bottom: 20px;
}
/* 合并为一个 20px 的间距 */

阻止 margin collapse 的方法：

  • 父元素设置 padding 或 border
  • 父元素设置 overflow: hidden / auto / scroll
  • 父元素形成 BFC（display: flex/inline-block/flow-root）
  • 兄弟元素之间添加非空元素隔开

负 margin 的应用

负 margin 可以实现特殊布局效果：

/* 1. 元素左移/上移 */
.pull-left {
    margin-left: -20px;
}

/* 2. 抵消元素不必要的间距 */
.grid {
    margin-left: -10px;
    margin-right: -10px;
}
.item {
    margin: 0 10px;
}

/* 3. 等高列布局 */
.parent {
    overflow: hidden;
}
.column {
    float: left;
    width: 33.33%;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

/* 4. 居中偏移（配合 position） */
.center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -width/2;
}

6. BFC 与盒模型的关系

什么是 BFC

BFC（Block Formatting Context，块级格式化上下文）是一个独立的渲染区域，内部元素不会影响外部布局。

触发 BFC 的条件：

/* 常见方式 */
.bfc {
    overflow: hidden;           /* auto/scroll 也可 */
    display: inline-block;
    position: absolute;
    position: fixed;
    display: flex;
    display: grid;
    display: flow-root;         /* 纯 CSS 方式，不影响其他样式 */
}

BFC 在盒模型中的作用

  1. 阻止 margin collapse
.parent {
    display: flow-root;         /* 形成 BFC，阻止 margin 合并 */
}
.child {
    margin-top: 20px;           /* 不再与父元素合并 */
}
  1. 包含浮动元素（清除浮动）
.clearfix {
    display: flow-root;          /* 替代传统的 clearfix 方案 */
}
  1. 阻止文字环绕
.box {
    display: flow-root;         /* 内部元素不会被外部浮动影响 */
}
  1. 作为独立容器，不被外部元素影响

7. 视觉尺寸 vs 占据尺寸

视觉尺寸（Visual Size）

元素在页面上实际显示的大小，包含 content、padding、border：

.visual {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid #333;
    /* 视觉宽度 = 200 + 20*2 + 5*2 = 250px */
    /* 视觉高度 = 100 + 20*2 + 5*2 = 150px */
}

占据尺寸（Occupied Size）

元素在文档流中占用的空间，包含 margin：

.occupied {
    margin: 10px 20px;
    /* 占据宽度 = 视觉宽度 + margin-left + margin-right */
    /* 占据高度 = 视觉高度 + margin-top + margin-bottom */
}

实际应用区别

/* 使用 box-sizing: border-box 时 */
.box {
    box-sizing: border-box;
    width: 200px;           /* 视觉宽度 = 200px */
    padding: 20px;
    border: 5px solid;
    margin: 10px;
    /* 占据宽度 = 200 + 10*2 = 220px */
}

/* border-box 更符合"占据"语义：设置的值就是实际占用的尺寸 */

参考文章：