盒模型与盒尺寸
约 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(外边距合并)
垂直方向上,相邻元素的外边距会合并为一个,取较大值。
三种情况:
- 相邻兄弟元素
.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 30px;
}
/* 实际间距 = max(20px, 30px) = 30px */- 父子元素(没有 padding/border/overflow 隔开)
.parent {
margin-top: 20px;
}
.child {
margin-top: 10px;
}
/* 实际间距 = max(20px, 10px) = 20px,合并到父元素 */- 空块级元素
.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 在盒模型中的作用
- 阻止 margin collapse
.parent {
display: flow-root; /* 形成 BFC,阻止 margin 合并 */
}
.child {
margin-top: 20px; /* 不再与父元素合并 */
}- 包含浮动元素(清除浮动)
.clearfix {
display: flow-root; /* 替代传统的 clearfix 方案 */
}- 阻止文字环绕
.box {
display: flow-root; /* 内部元素不会被外部浮动影响 */
}- 作为独立容器,不被外部元素影响
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 更符合"占据"语义:设置的值就是实际占用的尺寸 */参考文章:
