掌握CSS嵌套布局需统一使用box-sizing: border-box避免尺寸溢出，处理margin折叠通过BFC或padding替代，合理利用BFC隔离盒模型影响。
在CSS布局中，盒模型是理解元素尺寸和间距的基础。当处理嵌套元素时，合理运用盒模型不仅能避免意外的布局问题，还能提升页面结构的可控性。
理解标准盒模型与IE盒模型的区别
默认情况下，CSS使用标准盒模型：元素的总宽度 = 内容宽度 + padding + border + margin。当你给一个宽度为200px的盒子添加左右各10px的padding和1px的border，实际占据的宽度会变成224px。
而IE盒模型（通过box-sizing: border-box启用）则将padding和border包含在设定的width之内。这样设置width: 200px后，无论怎么加padding或border，总宽仍为200px，内容区域自动压缩。
在嵌套结构中推荐统一使用：
立即学习“前端免费学习笔记（深入）”；
- *, *::before, *::after { box-sizing: border-box; }
这样能避免子元素padding撑破父容器的问题。
父子元素边距重叠的处理
块级嵌套元素间常出现margin折叠现象：父元素与第一个/最后一个子元素的上下margin可能合并，导致实际间距小于预期。
解决方法包括：
- 给父元素添加padding-top或border-top
- 使用overflow: hidden创建新的BFC（块格式化上下文）
- 改用padding代替子元素的外边距
例如，防止子元素margin-top影响父元素位置：
避免padding撑破父容器宽度
常见问题：父元素width: 100%，子元素width: 100%并加padding，结果超出容器。
解决方案：
- 使用box-sizing: border-box让padding包含在width内
- 用calc(100% - 20px)手动减去padding值
- 以padding控制内部间距，而非依赖子元素的margin
更优做法是父元素定宽或百分比，子元素仅设padding，不设横向margin。
利用BFC隔离内部盒模型影响
当嵌套结构复杂时，让某个子元素形成BFC可阻止margin重叠、清除浮动，并独立计算盒模型。
触发BFC的方式：
- overflow: hidden/auto/scroll
- display: flex/grid
- float: left/right
例如，避免子元素浮动影响父元素高度：
.parent { overflow: hidden; } .child { float: left; width: 50%; }此时父元素能正确包裹子元素，且内部盒模型独立计算。
基本上就这些。掌握盒模型在嵌套中的行为，关键在于统一box-sizing、警惕margin折叠、合理使用BFC。不复杂但容易忽略细节。
