CSS 盒模型与尺寸（2025-2026 核心知识）

1. 两种盒模型对比（必背）

盒模型类型	计算公式（width/height 代表什么）	实际占用宽度计算公式	现代使用占比	推荐程度
标准盒模型（默认）	width/height = 内容宽度/高度	width + padding-left + padding-right + border-left + border-right + margin左右	较少（新项目）	★★☆☆☆
IE盒模型（border-box）	width/height = 内容 + padding + border 的总宽度/高度	width + margin左右（padding和border被包含在width内）	90%+（现代项目）	★★★★★（强烈推荐）

结论（2025-2026 共识）：

几乎所有现代项目都使用 box-sizing: border-box
全局设置 border-box 是前端工程化标配

/* 强烈推荐的全局设置（写在 reset 或 normalize 之后） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

2. 常用尺寸属性速查表

属性	作用	常用值示例	注意事项与现代写法
width	内容区域宽度	100%、300px、auto、min-content	优先 % / vw / rem / min/max
height	内容区域高度	100vh、auto、fit-content	慎用固定 px，优先 min-height
min-width / max-width	最小/最大宽度限制	min-width: 320px; max-width: 1200px	响应式布局必备
min-height / max-height	最小/最大高度限制	min-height: 100vh	常用于卡片、页面最小高度
padding	内边距	1rem、16px 20px、0.5em	推荐 rem / 变量
border	边框（宽度+样式+颜色）	1px solid #ddd	border-radius 常用 8px/12px
margin	外边距	1rem auto、0 -1rem	垂直 margin 会合并
现代推荐尺寸写法（2025-2026）：

.card {
  width: min(100%, 420px);          /* 响应式宽度上限 */
  min-height: 200px;
  padding: 1.5rem;
  margin: 2rem auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

3. margin 合并（Margin Collapsing）规则（重中之重）

合并条件（同时满足才合并）：

都是垂直方向的 margin（top/bottom）
元素之间没有内容、padding、border 分隔
没有创建新的 BFC 或其他阻断合并的条件
不是绝对定位元素（absolute/fixed）

合并规则（取最大值）：

正+正 → 取最大值
负+负 → 取最小值（最负的）
正+负 → 相加

常见合并场景：

/* 会合并：父子垂直 margin */
.parent { margin-top: 20px; }
.child  { margin-top: 30px; }  /* 最终父元素外边距 = 30px */

/* 兄弟元素连续垂直 margin */
p + p { margin-top: 1.5em; }   /* 与前一个 p 的 margin-bottom 合并 */

避免合并的常用方法（实际开发最常使用）：

给父元素添加 padding-top 或 border-top
创建 BFC（overflow: hidden / auto / flow-root）
使用 display: flex / grid（容器会阻止子元素 margin 合并）
添加 padding: 0.01px（hack，不推荐）

4. BFC（Block Formatting Context）可视格式化上下文

BFC 是什么？
一个独立的渲染区域，里面的布局与外部互不干扰，主要解决：

高度塌陷（清除浮动）
垂直 margin 合并
自适应两栏布局

创建 BFC 的常用方式（2025-2026 优先级排序）

触发方式	是否常用	副作用	推荐指数
display: flow-root	是	几乎无副作用	★★★★★（最推荐）
overflow: hidden / auto / scroll	是	可能隐藏阴影、裁剪内容	★★★★☆
display: flex / inline-flex	是	改变布局方式	★★★★☆
display: grid / inline-grid	是	改变布局方式	★★★★☆
float: left/right	否	脱离文档流，高度塌陷	★★☆☆☆
position: absolute / fixed	否	脱离文档流	★★☆☆☆

经典应用：清除浮动（现代写法）

.clearfix {
  display: flow-root;           /* 2025+ 最推荐 */
  /* 或 */
  overflow: hidden;             /* 仍然广泛使用 */
}

5. 2025-2026 盒模型相关快速决策表

需求场景	推荐方案	说明
所有项目统一盒模型	全局 `* { box-sizing: border-box; }`	工程化标配
防止父子 margin 合并	父级 padding-top 或 display: flow-root	优先 flow-root
清除浮动/高度塌陷	display: flow-root	语义最清晰
两栏自适应布局（左侧固定右侧自适应）	float + overflow: hidden（BFC）或 flex	flex 更现代
卡片/容器宽度自适应但有上限	width: min(100%, 1200px)	响应式神器
垂直居中 + 高度自适应	display: flex + align-items: center	简单高效