元素设置边框后高度变高是因为默认box-sizing为content-box，此时border和padding会额外增加尺寸；将box-sizing设为border-box可使宽高包含内容、内边距和边框，避免撑大；推荐全局设置*{box-sizing:border-box}以统一布局行为。
在CSS布局中，元素设置了边框（border）后高度变高，是因为默认的 box-sizing 模式为 content-box。在这种模式下，元素的宽度和高度只包含内容区域，而内边距（padding）和边框（border）会额外增加到总尺寸上，导致实际占据的空间超出设定值。
问题原因：border 和 padding 撑开盒模型
当你给一个高度为 100px 的元素添加 5px 的上下边框时，实际占用高度变成 110px（100 + 5 + 5）。这在精确布局中容易造成错位或溢出。解决方案：使用 border-box 统一计算尺寸
将 box-sizing 设置为 border-box，可以让元素的 width 和 height 包含 content、padding 和 border，避免被撑大：- 设置
box-sizing: border-box; - 此时设定的 height 就是最终可视高度
- 即使添加 border 或 padding，也不会再影响外部布局
推荐全局重置盒模型：
* {
box-sizing: border-box;
}
保持独立计算：content-box 的使用场景
如果你确实需要使用 content-box（比如希望某些元素的尺寸动态扩展），可以通过显式控制尺寸来避免意外撑高：- 手动减去 border 宽度：例如 height 设为
calc(100px - 2px * 2)（上下边框各2px） - 使用 flex 或 grid 布局自动适应，减少固定高度依赖
- 利用 padding 替代部分视觉效果，避免频繁修改 border
基本上就这些。多数情况下，统一使用 border-box 是更稳定的选择，能有效解决边框和内边距导致的高度不一致问题。content-box 虽然保留了原始计算方式，但在现代布局中需谨慎使用。
