做前端的都懂，CSS盒子模型真的是入门坎，也是日常开发最容易踩坑的地方。很多新手写布局，明明设了宽高，页面却乱得一塌糊涂，调试半天找不到问题，最后发现，原来是没搞懂盒子模型的套路。
其实不用把它想复杂，说白了，网页上所有元素，比如div、p、按钮，本质上都是一个“盒子”。这个盒子不是实心的，分四层，从里到外依次是：内容区、内边距、边框、外边距，缺一不可。
先掰扯最核心的内容区，就是盒子里面装东西的地方，比如文字、图片，我们设的width和height，其实就是这个内容区的尺寸。比如设width: 200px，不是整个盒子宽200px，这点新手最容易搞混，踩过一次就记牢了。
然后是内边距，就是内容区和边框之间的空隙，用padding控制。比如给盒子加padding: 10px，意思是内容离盒子边框还有10px的距离，这样里面的文字不会贴边，看起来更舒服。但要注意，padding会让盒子整体变大，比如200px宽的盒子，加10px内边距，实际宽就变成220px了，这点巨坑。
边框就是盒子的“外壳”，用border控制，比如border: 1px solid #ddd，就是给盒子加一个灰色的细边框。边框也会占尺寸，和padding一样，会让盒子比设置的宽高更大，新手常常忽略这个，导致布局错位。
最外面的是外边距，就是盒子和其他盒子之间的空隙，用margin控制。比如margin: 20px，就是让这个盒子和周围的元素保持20px的距离，避免挤在一起。margin有个小坑，垂直方向会“合并”，两个盒子上下margin，不会叠加，只取最大的那个，调试时能急死人。
还有个关键知识点，box-sizing属性，新手一定要记住。默认是content-box，就是宽高只算内容区；设为border-box，宽高就包含内边距和边框，这样盒子尺寸就固定了，不用再手动计算，能省不少事。
下面整个综合实例，把所有知识点都融进去，直接复制就能运行，注释写得明明白白，新手也能看懂：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型综合实例</title>
<style>
/* 核心：设置box-sizing，避免尺寸计算麻烦 */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* 盒子1：演示完整四层结构 */
.box1 {
width: 200px;
height: 150px;
background: #f0f8ff; /* 内容区背景色 */
padding: 15px; /* 内边距 */
border: 2px solid #007fff; /* 边框 */
margin: 20px; /* 外边距 */
}
/* 盒子2：对比box-sizing的区别 */
.box2 {
width: 200px;
height: 150px;
background: #f5f5f5;
padding: 15px;
border: 2px solid #ddd;
margin: 20px;
box-sizing: content-box; /* 默认值，宽高只算内容区 */
}
</style>
</head>
<body>
<div class="box1">
盒子1（box-sizing: border-box）<br>
宽200px（包含内边距和边框）
</div>
<div class="box2">
盒子2（box-sizing: content-box）<br>
宽200px（只算内容区，实际更宽）
</div>
</body>
</html>
评论