CSS盒模型（div四层结构）

一、盒模型核心概念
CSS盒模型是HTML元素布局的核心基础，所有HTML元素都可以看作一个「盒子」，由从外到内4层结构组成，是网页排版的底层逻辑。
二、四层结构详解（从外到内）
层级 英文名称 中文名称 核心作用 关键特性 背景色覆盖
1（最外层） margin 边界/外边距 控制当前元素与其他元素之间的距离，用于元素间的留白 完全透明，无样式，不会显示任何内容；可设置负值实现元素重叠 ❌ 不覆盖
2 border 边框 元素的外轮廓，包裹整个盒子 可自定义粗细、颜色、样式（实线、虚线、圆角等） ✅ 覆盖
3 padding 填充/内边距 控制内容(content)与边框(border)之间的距离，用于内容与边框的留白 会撑大盒子的实际尺寸 ✅ 覆盖
4（最内层） content 内容区 元素实际承载的内容（文字、图片、子元素等） 给div设置width/height时，默认定义的就是内容区的尺寸 ✅ 覆盖
三、方向与简写规则

1. 方向顺序
   除content外，margin、border、padding都支持4个方向单独设置，统一遵循顺时针顺序：
   top（上） → right（右） → bottom（下） → left（左）
2. 1/2/3/4个参数的简写规则
   margin、padding、border的简写规则完全一致，以margin为例：
   参数数量 写法示例 对应方向 说明
   4个参数 margin: 10px 20px 30px 40px; 上 → 右 → 下 → 左 四个方向值完全独立
   3个参数 margin: 10px 20px 30px; 上 → 左右 → 下 左右方向值相同，共用第二个参数
   2个参数 margin: 10px 20px; 上下 → 左右 上下共用第一个参数，左右共用第二个参数
   1个参数 margin: 10px; 上右下左 四个方向值完全相同，统一设置
   四、尺寸计算与关键特性
3. 盒子总尺寸计算（标准盒模型）
   • 总宽度 = 内容区width + 左右padding + 左右border + 左右margin
   • 总高度 = 内容区height + 上下padding + 上下border + 上下margin
   补充：IE怪异盒模型（已淘汰）：width直接包含padding和border，总宽度 = width + 左右margin，现代CSS可通过box-sizing: border-box实现该效果。
4. 背景色生效范围
   元素的background-color背景色，会完整覆盖content、padding、border三个区域，不会作用于最外层的margin（边界），margin始终透明。
5. 常见特性与注意事项
   • margin塌陷：垂直方向的两个相邻margin会合并（取较大值），水平方向不会塌陷，是布局中最常见的坑。
   • padding撑大盒子：给元素加padding会直接增加盒子的实际尺寸，若需保持盒子大小不变，可设置box-sizing: border-box，让width包含padding和border。
   • border的特殊用法：可通过border-radius实现圆角，border: none可隐藏默认边框，outline（外轮廓）不属于盒模型，不影响布局。
   五、实战代码示例
6. 完整盒模型代码
   div {
   /* 内容区尺寸 /
   width: 200px;
   height: 200px;
   / 内边距padding：上下20px，左右30px /
   padding: 20px 30px;
   / 边框border：4px 红色 实线 /
   border: 4px solid #ff0000;
   / 外边距margin：上10px 右20px 下30px 左40px /
   margin: 10px 20px 30px 40px;
   / 背景色：覆盖content+padding+border /
   background-color: #f0f0f0;
   / 解决padding撑大盒子问题 */
   box-sizing: border-box;
   }
7. 单独方向设置
   div {
   /* 单独设置上内边距 /
   padding-top: 10px;
   / 单独设置右边框 /
   border-right: 2px dashed #000;
   / 单独设置下外边距 */
   margin-bottom: 15px;
   }