CSS盒子模型是网页布局的核心基础，每个HTML元素都被视为一个矩形盒子，由内容（Content）、内边距（Padding）、边框（Border）、外边距（Margin）四部分组成。根据元素的布局行为，盒子类型主要分为以下四类：

特点：
- 独占一行，垂直排列
- 支持设置宽高（width/height）
- 可设置所有方向的内外边距（padding/margin）
- 默认宽度撑满父容器
常见标签：<div>、<p>、<h1>~<h6>、<ul>
设置方式：display: block;

示例：

div {display: block;width: 300px;margin: 10px auto; /* 水平居中 */
}

特点：
- 不独占一行，水平排列
- 不支持设置宽高（由内容撑开）
- 仅支持左右方向的padding和margin（上下无效）
- 垂直方向对齐受vertical-align影响
常见标签：<span>、<a>、<strong>
设置方式：display: inline;

示例：

span {display: inline;padding: 0 10px; /* 仅左右有效 */margin-right: 5px;
}

特点：
- 水平排列，不独占一行
- 支持设置宽高
- 支持所有方向的padding和margin
- 结合块级与内联的优点，常用于导航菜单项
常见标签：<img>、<input>、<button>
设置方式：display: inline-block;

示例：

.nav-item {display: inline-block;width: 100px;padding: 10px;margin: 5px;
}

示例：

.container {display: flex;justify-content: space-between; /* 水平均匀分布 */align-items: center;             /* 垂直居中 */
}

类型	排列方式	宽高支持	内外边距支持	典型应用场景
块级盒子	垂直独占一行	✅	✅ 全方向	容器、标题、段落
内联级盒子	水平并排	❌	❌ 仅左右	文本片段、链接、图标
内联块级盒子	水平并排	✅	✅ 全方向	按钮、输入框、导航项
弹性盒子	弹性横向排列	✅	✅ 全方向	响应式布局、复杂对齐场景

盒模型计算方式：
- 标准盒模型（content-box）：width/height仅定义内容区大小，总宽高需叠加padding和border。
- 怪异盒模型（border-box）：width/height包含内容、padding和border，布局更直观（通过box-sizing: border-box;启用）。
布局技巧：
- 内联元素转块级：display: inline-block解决内联元素无法设置宽高的问题。
- 避免外边距塌陷：父子块级元素间添加padding或border，防止垂直margin合并。
- 弹性布局替代浮动：优先使用flex替代float，避免高度塌陷问题。

优先选择弹性布局：现代项目推荐flex或grid，简化复杂布局。
统一盒模型：全局设置* { box-sizing: border-box; }，避免尺寸计算混乱。
理解内外显示类型：
- 外部显示类型：决定盒子如何与其他元素相处（如block独占一行）。
- 内部显示类型：决定子元素的排列方式（如flex子项弹性布局）。