网页布局中，每一个元素都可以理解为一个矩形盒子。制作三个嵌套的盒子，本质上就是让三个<div>元素按层级包裹，再通过CSS分别控制外层、中层、内层的背景色、边框与内边距。这样既能观察盒模型的实际表现，也能为后续学习卡片、弹窗、嵌套列表等复杂布局打下基础。
一、理解盒模型与嵌套关系
CSS盒模型由内容区、内边距、边框和外边距四部分组成。一个元素的宽度如果设置为400px，在不修改box-sizing的情况下，实际占用宽度为400px加上左右内边距和左右边框。嵌套盒子中，子元素的包含块是父元素的内容区，也就是说父元素的padding会推开子元素，父元素的border不参与子元素定位。因此在制作三个嵌套盒子时，如果外层没有设置box-sizing: border-box，而同时设置width、padding和border，外层实际宽度会超过预期，内层反而会溢出。
为了避免这类计算偏差，通常给三层盒子都设置box-sizing: border-box。该属性会把边框和内边距包含在声明的宽度和高度中，这样width: 400px就是整个盒子外边界到外边界的尺寸，布局更容易预测。对于嵌套结构，内层使用width: 100%和height: 100%可以填满父级内容区，但前提是父级有明确的高度或已被内容撑开。
三个盒子不一定要使用固定像素，也可以使用相对单位或flex布局。关键是让每一层的背景色和边框有明显差异，例如外层深蓝、中层浅灰、内层红色，通过视觉差快速判断边界。
二、用CSS控制三层盒子的视觉差异
嵌套盒子能否被一眼看清，取决于每层是否有足够的颜色对比和内边距。外层适合使用较深的背景色和实线边框，中层可以使用浅色背景加虚线边框，内层则使用鲜艳颜色突出核心区域。下面是一段基础样式代码：
.outer {
width: 400px;
height: 300px;
padding: 30px;
border: 4px solid #2c3e50;
background-color: #3498db;
box-sizing: border-box;
}
.middle {
width: 100%;
height: 100%;
padding: 20px;
border: 3px dashed #e67e22;
background-color: #ecf0f1;
box-sizing: border-box;
}
.inner {
width: 100%;
height: 100%;
background-color: #e74c3c;
border: 2px solid #c0392b;
box-sizing: border-box;
}
外层盒子设置了width: 400px和height: 300px，并通过padding: 30px把中层盒子向内推。由于同时声明了box-sizing: border-box，外层总宽度不会超过400px，边框和内边距都从这400px里扣除。中层盒子的width: 100%和height: 100%指相对于外层内容区的尺寸，因此它能填满外层去掉内边距后的区域。
内层盒子没有设置内边距，所以红色背景会覆盖整个中层内容区。它的边框使用2px实线，颜色比背景更深，形成内收的边界效果。中层使用虚线边框是为了在浅色背景上制造更明显的分隔感，也让三层结构在视觉上更有层次。
三、完整HTML结构示例
把三层样式对应到HTML结构中，只需要三个<div>标签依次嵌套。最外层带上class="outer"，中间层带上class="middle"，最内层带上class="inner"。完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>三个嵌套盒子</title>
<style>
.outer {
width: 400px;
height: 300px;
padding: 30px;
border: 4px solid #2c3e50;
background-color: #3498db;
box-sizing: border-box;
}
.middle {
width: 100%;
height: 100%;
padding: 20px;
border: 3px dashed #e67e22;
background-color: #ecf0f1;
box-sizing: border-box;
}
.inner {
width: 100%;
height: 100%;
background-color: #e74c3c;
border: 2px solid #c0392b;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
</body>
</html>
这个结构中，<div class="inner"></div>是最内层盒子，它没有任何文字内容，完全依靠CSS的宽高和背景色来显示。内层盒子闭合后，紧接着闭合中层和外层的<div>。HTML的闭合顺序必须按照“后进先出”的原则，否则浏览器可能会错误解析层级，导致样式失效。
如果希望内层盒子中显示文字，可以在内部加入一个<p>或<span>标签，并设置文字颜色。但要注意，文字的加入可能撑开盒子高度，如果不想改变布局，可以为内层设置overflow: hidden。
四、常见问题与布局优化
第一个常见问题是子盒子宽度溢出。比如外层设置width: 300px，没有设置box-sizing: border-box，又设置了padding: 20px和border: 2px，那么内容区宽度为300px减去40px内边距再减去4px边框，最终只有256px。内层设置width: 100%时实际为256px。如果内层还设置了自己的padding，它的内容区会继续缩小。理解这个关系能避免宽度计算混乱。
第二个问题是边框叠加。三层盒子各自有边框，边框会占用像素。如果希望背景色和边框线更清晰，可以统一使用box-sizing: border-box，并给每层留出不同的padding。边框颜色和类型也要有对比，例如实线、虚线和双线配合。不要把所有边框都设置成同样的黑色实线，否则嵌套关系会被视觉弱化。
第三个问题是垂直方向的外边距合并。如果父盒子没有边框或内边距，子盒子的margin-top会传递到父元素，造成父盒子一起下移。这里给父元素添加padding或border即可阻断外边距传递。也可以使用overflow: hidden，但更推荐使用padding实现间隔，因为它不会影响子元素的可视区域。
需要居中显示时，可以给最外层盒子设置margin: 0 auto，但该盒子默认是块级元素，必须有明确宽度。也可以使用flex让内部盒子水平垂直居中，例如给父级设置display: flex、align-items: center和justify-content: center。在响应式布局中，外层宽度还可以改用百分比或max-width，让三个嵌套盒子在不同屏幕尺寸下都能保持稳定展示。