盒模型由content、padding、border、margin四层构成，从内到外依次为内容区、内边距、边框和外边距。1. content的宽高由width/height决定；2. padding增加内部空间且背景延伸至此区域；3. border包围padding，可设样式；4. margin控制外部间隔，透明不可见。标准盒模型（content-box）下width仅指content，总宽=width+padding+border+margin；IE盒模型（border-box）则让width包含content、padding和border，更易控尺寸。现代开发推荐使用border-box。注意margin折叠、负值及auto居中特性。布局时若忽略padding和border易导致溢出，建议统一设置box-sizing: border-box或用calc()、Flexbox等方案避免计算错误。精准掌握各层关系是实现稳定布局的关键。
盒模型是CSS布局的核心概念，每个HTML元素都可以看作一个矩形盒子，这个盒子由四个部分组成：content（内容）、padding（内边距）、border（边框）和margin（外边距）。理解这四层的结构关系，有助于准确控制页面布局和元素间距。
1. 盒子的四层结构从内到外
盒子的结构像一层层嵌套的矩形，从最内层到最外层依次为：
- content：实际内容区域，比如文字、图片等。它的大小由 width 和 height 决定。
- padding：内容与边框之间的空间，属于盒子内部的“留白”。背景颜色或背景图会延伸到 padding 区域。
- border：围绕在 padding 外的一条边线，可以设置边框的样式、宽度和颜色。
- margin：盒子与其他外部元素之间的距离，透明且不接受背景，用于控制元素间的间隔。
2. 盒模型的两种计算方式
CSS中存在两种盒模型计算规则，影响 width 和 height 的含义：
标准盒模型（content-box）：默认模式。你设置的 width 和 height 只作用于 content 区域。总占据空间 = width/height + padding + border + margin。例如：
width: 200px; padding: 20px; border: 5px solid; → 实际宽度 = 200 + 40 + 10 = 250px（不含margin）
IE盒模型（border-box）：通过 box-sizing: border-box 设置。此时 width 和 height 包含了 content、padding 和 border。padding 和 border 会在指定宽高内“压缩”内容区域。
例如：
width: 200px; padding: 20px; border: 5px solid; → 总宽度仍为200px，content 宽度被压缩为 150px。
现代开发中推荐使用 border-box，能更直观地控制元素尺寸。
立即学习“前端免费学习笔记（深入）”；
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
3. margin 的特殊行为
margin 是唯一不绘制在盒子内的部分，它位于 border 外侧，用于与其他元素产生间隔。需要注意以下几点：
- 上下 margin 可能发生折叠（collapse）：相邻的两个垂直 margin 会合并成一个，取较大值。
- margin 可以为负值，用来实现重叠或反向偏移效果。
- 设置 margin: auto 可实现水平居中（需配合固定宽度）。
4. 实际布局中的影响
若未考虑 padding 和 border，容易导致元素溢出容器。比如在一个 width: 300px 的父容器中放入一个 width: 100% 的子元素，如果子元素有 padding 或 border，就会超出。
解决方案：
- 统一设置 box-sizing: border-box，避免尺寸计算错误。
- 利用 calc() 手动调整：width: calc(100% - 20px);
- 使用 Flexbox 或 Grid 布局，自动处理间距问题。
基本上就这些。掌握 content、padding、border、margin 的层级关系和计算逻辑，才能精准控制网页布局。不复杂但容易忽略细节。
