根本原因是 box-sizing 默认为 content-box，导致边框和内边距额外增加总尺寸；应全局设为 border-box：, ::before, *::after { box-sizing: border-box; }。
容器加边框后出现对齐错位，根本原因通常是元素默认的 box-sizing 值为 content-box，导致边框和内边距被额外加在设定的宽高之外，破坏了布局预期尺寸。
理解 box-sizing 的两种模式
content-box（默认）：设置的 width/height 仅指内容区大小，border 和 padding 会向外撑开总尺寸。
border-box：设置的 width/height 包含 content + padding + border，更符合直观的尺寸控制逻辑。
全局统一 box-sizing 为 border-box
在 CSS 开头添加以下重置规则，让所有元素（包括伪元素）都使用 border-box 模式：
*, *::before, *::after {box-sizing: border-box;
}
对已有容器快速修复
若只针对部分容器调整，直接为其设置：
.container {
box-sizing: border-box;
width: 300px;
padding: 10px;
border: 2px solid #ccc;
}
此时该容器总宽度严格为 300px，不会因边框或内边距而溢出或错位。
立即学习“前端免费学习笔记（深入）”；
配合 flex/grid 布局时的注意事项
- Flex 项目默认主轴尺寸受
box-sizing影响，设为border-box后能准确响应flex-basis - Grid 轨道尺寸计算也依赖子项的实际占用空间，统一
border-box可避免列宽/行高意外超出 - 当使用百分比宽度 + 边框时，
border-box能确保百分比始终按容器比例生效
不复杂但容易忽略。统一 box-sizing 是现代 CSS 布局的基础习惯，加边框不再等于“多出几个像素”。
