border使元素变大是因box-sizing默认为content-box，width/height不包含border；改用border-box可解决，推荐全局设置*,::before,::after{box-sizing:border-box}并配合min-width:0等措施。
border 会让元素变大，是因为默认 box-sizing 是 content-box
加 border 后宽高超出预期，不是 border 写错了，是 CSS 盒模型默认行为：width 和 height 只算内容区，border 和 padding 额外加在外部。比如设了 width: 200px; border: 5px solid red;，实际占用宽度就是 210px（左右 border 各 5px）。
解决办法是改盒模型——把 box-sizing 设为 border-box：
div {
width: 200px;
border: 5px solid red;
box-sizing: border-box;
}
这样 200px 就包含内容、内边距和边框，尺寸可控。
全局设置 box-sizing: border-box 更省心
逐个写 box-sizing: border-box 容易漏，推荐在项目开头统一重置：
*,
*::before,
*::after {
box-sizing: border-box;
}
注意三点：
-
*选择器层级低，但能覆盖绝大多数元素 -
::before和::after必须显式声明，否则伪元素仍用content-box - 某些第三方组件（如旧版 Bootstrap）可能已设过
box-sizing，需检查是否被覆盖
flex 或 grid 布局中 border 仍可能“撑开”容器
即使用了 box-sizing: border-box，在 display: flex 或 grid 下，如果子项没设 flex-shrink: 0 或固定尺寸，border 增加的像素仍可能触发收缩/换行。
典型表现：
- 两列
flex: 1的 div，加 border 后第二列换到下一行 - grid 模板列宽设为
1fr，加 border 后总宽超容器，出现横向滚动条
应对方式：
- 给子项加
min-width: 0（flex 项）或min-inline-size: 0（兼容性更好） - 用
calc()手动扣减 border，例如width: calc(50% - 10px)（当左右 border 共 10px） - 优先用
border-box+min-width: 0组合，比 calc 更健壮
border-style: none 不等于没边框占位
border: 1px solid transparent 和 border: 1px none 表现不同：none 确实不占渲染空间，但 transparent 仍按 1px 计入盒模型（因为 border-width 仍为 1px）。
所以想“隐藏边框但保留尺寸”，用：
border: 1px solid transparent;
而想“彻底移除边框及其占位”，必须写：
border: none; /* 或 */ border-width: 0;
这点在动态切换边框时容易出错——比如 JS 切 class 控制显隐，若只改颜色不改 border-width，尺寸还是会跳。
真正要稳住尺寸，box-sizing: border-box 是基础，但得配合 min-width、border-width 显式控制和伪元素重置，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
