如何用css解决盒模型导致的布局偏移
使用 box-sizing: border-box 可解决盒模型导致的布局偏移，使 padding 和 border 包含在宽高内；配合 Flex 或 Grid 布局能有效避免传统盒模型问题，提升布局稳定性。
布局偏移，使 padding 和 border 包含在宽高内；配合 Flex 或 Grid 布局能有效避免传统盒模型问题，提升布局稳定性。盒模型导致的布局偏移，通常是因为元素的 padding 和 border 会额外增加元素的总宽度和高度，从而破坏预期的布局。比如设置一个宽度为100%的盒子，加上 padding 后实际宽度会超过父容器，造成横向滚动或错位。
使用 box-sizing: border-box
这是最直接有效的解决方案。将所有元素的盒模型改为 border-box，让 padding 和 border 包含在 width 和 height 内部计算。添加以下全局样式：
* {
box-sizing: border-box;
}
这样设置后，当你定义 width: 200px，这个值就包含了内容、padding 和 border，不会超出预期尺寸。避免百分比宽度与固定 padding 冲突
当使用百分比布局（如两栏布局）时，如果左右两个元素各设 width: 50%，再加 padding，就会导致总宽度超过 100%。解决方法有几种：
- 使用 box-sizing: border-box，允许在 50% 宽度内包含 padding
- 用 flex 布局代替浮动或 inline-block，flex 自动处理内部间距
- 使用 CSS Grid，通过 grid-gap 控制间距而不影响子元素盒模型
- 用 calc() 手动减去 padding，例如：
width: calc(50% - 10px);
使用现代布局替代传统盒模型依赖
Flexbox 和 Grid 布局能从根本上减少盒模型带来的干扰。例如用 Flex 实现等宽两栏：
.container {
display: flex;
}
.left, .right {
flex: 1;
padding: 20px;
box-sizing: border-box;
}
即使有 padding，flex 会自动分配可用空间，不会溢出。基本上就这些。关键在于统一使用 box-sizing: border-box 并优先采用现代布局方式，能大幅降低盒模型带来的偏移问题。
