css盒模型是网页布局的核心概念之一，它描述了浏览器如何计算一个元素所占据的空间。在css中，每一个元素都会被渲染成一个矩形的盒子，这个盒子由内到外分别是内容区域、内边距、边框和外边距。理解盒模型能帮助我们精准控制元素大小和元素之间的间距，避免布局中出现意外的溢出或错位。
盒模型的四个组成部分
一个标准的css盒子从里到外包含以下四个部分：
- content（内容区）：存放文本、图片等实际内容，大小由width和height决定。
- padding（内边距）：内容区到边框之间的空白，用padding属性设置。
- border（边框）：包裹内容和内边距的边界线，可设粗细和颜色。
- margin（外边距）：盒子与其他盒子之间的透明间隔。
标准盒模型与怪异盒模型
在css中，盒模型分为两种计算方式。标准盒模型下，设置的width只代表内容区宽度；而怪异盒模型（IE盒模型）下，width包含了内容、padding和border。我们可以通过box-sizing属性切换：
/* 标准盒模型：width仅为内容宽度 */
.box-standard {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid #333;
/* 实际占用宽度 = 200 + 40 + 10 = 250px */
}
/* 怪异盒模型：width包含内容和内外边距边框 */
.box-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid #333;
/* 实际占用宽度 = 200px，内容区被压缩 */
}
用代码观察盒模型
下面这段html结合css可以直观看到盒模型结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.demo {
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid red;
margin: 15px;
background: #f0f0f0;
}
</style>
</head>
<body>
<div class="demo">内容</div>
</body>
</html>
为什么margin会重叠
在普通文档流中，垂直方向上的相邻块级元素的margin会发生重叠，取两者较大值。这是盒模型规范的一部分，目的是让段落间距更自然。如果不想重叠，可以触发元素生成新的块级格式化上下文，例如设置overflow不为visible。
小结
css盒模型决定了元素在页面中的大小和位置表现。日常开发中推荐统一使用box-sizing: border-box，能大幅降低宽度计算复杂度。掌握content、padding、border和margin的关系，是写好css布局的重要一步。