盒模型
约 643 字大约 2 分钟
2026-04-02
思考
盒模型是什么？
盒模型结构
盒模型描述了元素在页面布局中所占据的空间结构。一个标准的盒模型由四个部分组成，从内到外依次是：
Content (内容区)
显示文本、图像等实际内容的区域，由
width和height控制。Padding (内边距)
内容与边框之间的透明区域，由
padding属性控制，背景色/背景图会延伸到此区域。Border (边框)
围绕内边距和内容的线条，由
border属性控制（宽度、样式、颜色）。Margin (外边距)
盒子与其他元素之间的透明区域，由
margin属性控制。
两种盒模型模式
CSS 中有两种盒模型计算方式，通过 box-sizing 属性来控制。
1. 标准盒模型 (content-box)
- 默认模式。
width仅指 Content 的宽度。- 实际占用宽度 =
width+padding+border+margin。 - 缺点：增加 padding 或 border 会导致元素总宽度变大，容易破坏布局。
.box {
width: 200px;
padding: 10px;
border: 5px solid black;
box-sizing: content-box; /* 默认值，可省略 */
}
/* 实际占用宽度 = 200 + 20(左右 padding) + 10(左右 border) = 230px */2. IE 盒模型 / 怪异盒模型 (border-box)
- 推荐模式。
width包含 Content + Padding + Border。- 实际占用宽度 =
width+margin。 - 优点：设置好宽度后，增加 padding 不会撑大盒子，内容区域会自动缩小，布局更可控。
.box {
width: 200px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box; /* 推荐设置 */
}
/* 实际占用宽度 = 200px (Content 会自动压缩为 170px) */content-box 引起的元素溢出
HTML
<div class="box">
<div class="content">Content</div>
</div>
<div>
<p style="margin:10px 0 0 0;">content 盒模型：</p>
<label> <input type="radio" name="box-sizing" value="content-box" checked /> content-box </label>
<label> <input type="radio" name="box-sizing" value="border-box" /> border-box </label>
</div>CSS
.box {
width: 200px;
background-color: #ff3f3f;
padding: 10px;
}
.content {
width: 100%;
padding: 10px;
border: 2px solid black;
}JavaScript
// 监听 input change 事件，切换盒模型
document.querySelectorAll('input[name="box-sizing"]').forEach(function (radio) {
radio.addEventListener("change", function () {
document.querySelector(".content").style.boxSizing = this.value;
});
});box 是标准盒模型，因此真实占用宽度为：200 + 20(左右padding) = 220px，也就是红色块的宽度。
content 也是标准盒模型，因此真实占用宽度为：200(width,基于父元素width的100%) + 20(左右padding) + 4(左右 border) = 224px， 也就是黑色边框的宽度。
所以，content 宽度超出了 box 宽度，导致 content 溢出 box。
解决方法：将 content 设置为怪异盒模型，让 content 真实占用宽度为父元素 box 的 width。