使用 box-sizing: border-box 可解决盒模型溢出问题，其将 padding 和 border 包含在 width 和 height 内；建议全局设置 * { box-sizing: border-box; }，再结合 overflow 隐藏溢出、Flexbox/Grid 布局自动分配空间，以及百分比宽度与 max-width 限制，避免固定尺寸导致的布局溢出。
盒模型导致的布局溢出，通常是因为元素设置了 width 或 height 后，再添加 padding 或 border，实际占用空间超过预期尺寸，从而撑破父容器或造成横向滚动。这个问题可以通过以下几种 CSS 方法有效解决。
使用 box-sizing: border-box
这是最常用且推荐的解决方案。默认情况下，CSS 使用 content-box 盒模型，width 和 height 只包含内容区域，不包括 padding 和 border。通过设置 border-box，width 和 height 将包含内容、padding 和 border，避免意外溢出。
示例：box-sizing: border-box; 让元素的总宽度等于你设定的 width 值。
建议全局设置，避免后续问题：
立即学习“前端免费学习笔记（深入）”；
* {
box-sizing: border-box;
}
控制 overflow 防止视觉溢出
当子元素确实超出父容器时，可以使用 overflow 属性隐藏或处理溢出内容，防止破坏页面布局。
常见用法：- overflow: hidden —— 隐藏溢出部分，适合轮播图、卡片截断等场景
- overflow: auto —— 溢出时自动出现滚动条
适用于父容器已知尺寸但子元素可能超宽的情况。
使用 Flexbox 或 Grid 布局自动适应
现代布局方式如 Flexbox 能自动处理子元素尺寸分配，减少手动计算 width 带来的溢出风险。
例如，使用 Flex 容器：.container {
display: flex;
}
.item {
flex: 1; / 自动均分空间，考虑 padding 和 border /
padding: 16px;
border: 1px solid #ccc;
box-sizing: border-box;
}
Flex 子项会根据容器空间自动调整，避免硬编码 width 导致溢出。
合理设置 max-width 和 width 百分比
避免使用固定像素 width + padding 的组合。改用百分比宽度配合 max-width 更安全。
推荐写法：.box {
width: 100%;
max-width: 300px;
padding: 16px;
border: 2px solid #ddd;
box-sizing: border-box;
}
这样元素在不同屏幕下都能自适应，不会因为 padding 加上后超出父容器。
基本上就这些方法。关键是统一使用 box-sizing: border-box，再结合现代布局和合理的尺寸控制，就能有效避免盒模型带来的溢出问题。
