使用box-sizing: border-box可使元素宽高包含padding和border，避免布局重叠；统一设置* { box-sizing: border-box; } 能减少计算错误；结合Flexbox或Grid布局及gap属性，替代传统margin控制间距，有效防止外边距合并与溢出问题。
布局重叠通常是因为元素的实际占用空间超出预期，导致与其他元素发生挤占。通过合理使用CSS盒模型属性，可以有效避免这类问题。
理解标准盒模型与IE盒模型
默认情况下，CSS使用的是标准盒模型：元素的width和height只包含内容区域，不包括padding和border。当你给一个宽300px的盒子加上左右各10px的内边距，实际占据宽度会变成320px，容易引发溢出或重叠。
切换为IE盒模型（也叫border-box模型）可以让width和height包含content、padding和border，更便于控制布局：
box-sizing: border-box;设置后，即使增加padding或border，元素总尺寸仍保持设定的width不变，减少意外溢出。
立即学习“前端免费学习笔记（深入）”；
统一使用border-box避免计算错误
为所有元素统一设置box-sizing，能从根本上减少因盒模型差异导致的布局错乱：
box-sizing: border-box;
}
这样页面中任何元素的尺寸都更容易预测，尤其在响应式设计或多列布局中效果明显。
合理设置外边距与空白空间
使用margin时注意相邻元素的外边距合并（margin collapse）问题，特别是在垂直方向上。可通过以下方式控制：
- 给父容器添加padding或border阻止margin合并
- 使用flex或grid布局替代传统块级流，减少对margin的依赖
- 用gap属性代替margin在栅格间留白，更清晰且不会重叠
利用Flexbox和Grid规避传统盒模型限制
现代布局方式如Flexbox和CSS Grid能自动处理子元素的空间分配，减少手动计算尺寸的需求：
.container {display: flex;
gap: 10px;
}
flex项目默认基于border-box计算，配合gap属性可完全避免因margin或padding导致的重叠。
基本上就这些。关键是统一盒模型行为，优先使用现代布局方案，少依赖固定宽高加padding的组合。这样能大幅降低布局错位的风险。
