百分比宽度加border会溢出是因为box-sizing默认为content-box，width仅指内容区，border和padding额外增加；改用border-box后width包含border和padding，避免溢出。
百分比宽度加border为什么会溢出
因为默认的 box-sizing 是 content-box，此时 width: 50% 只算内容区宽度，border 和 padding 都额外加在外部。比如容器宽 400px，width: 50% 是 200px，再加 border: 2px，实际占宽就是 204px —— 超出父容器一半，兄弟元素就可能被挤到下一行或横向滚动。
用 border-box 让 width 包含 border 和 padding
给元素设置 box-sizing: border-box 后，width 就指“整个盒模型的总宽度”，border 和 padding 会从这个宽度里扣减，不再外扩。
实操建议：
- 全局重置更省心：
*, *::before, *::after { box-sizing: border-box; } - 只针对特定组件时，直接写在选择器里，比如
.card { width: 50%; border: 1px solid #ccc; box-sizing: border-box; } - 注意：IE8+ 支持
box-sizing，但 IE7 及更早版本不支持（如果还要兼容，得用 hack 或 JS 补偿）
flex 布局中 border-box 仍可能失效？
不是失效，是 flex item 的尺寸计算优先级更高。即使设了 box-sizing: border-box，若没显式设置 flex-basis 或 width，浏览器可能按内容撑开，border 还是会“看起来溢出”。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 在 flex 容器中，推荐配合
flex: 0 0 50%（即flex-grow: 0; flex-shrink: 0; flex-basis: 50%）使用box-sizing: border-box - 避免只写
width: 50%而不控制 flex 属性，否则width可能被 flex 内部逻辑覆盖 - 检查 computed styles，确认最终生效的
flex-basis是否如预期
padding 和 border 同时存在时的宽度分配逻辑
border-box 下，width 是硬上限，所有 padding、border、content 加起来不能超这个值。浏览器会按规范顺序扣除：先 border，再 padding，最后剩下的是 content 宽度。
举例：一个元素设了 width: 200px; padding: 10px; border: 3px solid;，那么 content 区实际只有 200 - 2×10 - 2×3 = 174px。
容易踩的坑：
- 百分比
width和固定padding混用时，小屏幕下 content 区可能窄到无法容纳文字，需搭配min-width或媒体查询 -
border-style: double或groove等样式实际占用空间仍是 2×border-width，别误以为视觉厚度等于占用宽度 - 用
rem或em设 padding 时，要留意 font-size 继承关系，否则扣除逻辑会意外偏移
实际项目里，最常漏掉的是 flex 场景下的 flex-basis 显式声明 —— 光靠 box-sizing 压不住。
