使用box-sizing: border-box可解决百分比宽度布局异常，配合max-width限制和flex布局，能有效避免元素溢出或换行，确保响应式设计稳定。
在使用CSS盒模型时，设置宽度为百分比却出现布局异常，是前端开发中常见的问题。这通常是因为元素的总宽度不仅受width影响，还受到padding、border和box-sizing属性的影响。当这些值叠加后，实际占用空间可能超出父容器，导致换行或溢出。
理解盒模型对百分比宽度的影响
默认情况下，元素的box-sizing为content-box，这意味着：
-
width仅指内容区域宽度 -
padding和border会额外增加总宽度 - 例如：
width: 50%+padding: 20px→ 实际宽度 > 50%
这就容易造成两个“各占50%”的盒子无法并排显示，即使它们的width加起来是100%。
使用 box-sizing: border-box 统一计算方式
将盒模型改为border-box可解决大部分计算异常：
立即学习“前端免费学习笔记（深入）”；
* {
box-sizing: border-box;
}
此时：
-
width包含内容、内边距和边框 - 设置
width: 50%的元素，无论是否有padding或border，总宽度都不会超过50%
这是现代布局的基础实践，推荐在项目初始化样式中统一设置。
用 max-width 防止意外撑开
即使使用了border-box，某些场景下（如响应式设计）仍可能出现宽度失控。此时可用max-width提供安全限制：
.responsive-box {
width: 100%;
max-width: 80%;
padding: 20px;
box-sizing: border-box;
}
这样既能保持弹性，又能防止内容过多或屏幕过小时被撑变形。
结合 flex 布局避免手动计算
对于复杂布局，建议使用Flexbox代替纯百分比：
.container {
display: flex;
}
.item {
flex: 1; /* 自动均分空间，无需关心 padding 影响 */
padding: 15px;
box-sizing: border-box;
}
Flex布局自动处理空间分配，从根本上规避百分比计算问题。
基本上就这些。关键点是统一使用box-sizing: border-box，配合max-width做兜底限制，再结合现代布局方式，就能有效避免百分比宽度的异常问题。不复杂但容易忽略。
