当为导航菜单项添加悬停背景色时，若仅在 :hover 状态下设置 padding，会导致元素尺寸突变、导航栏整体高度抖动。解决方案是预先为导航项设置固定内边距，使悬停仅改变背景色而不影响布局。
在 CSS 布局中，元素的尺寸由其内容、内边距（padding）、边框（border）和外边距（margin）共同决定。默认情况下，.nav-item 未设置 padding，而你在 .nav-item:hover 中突然添加了 padding: 10px，这会直接扩大该
✅ 正确做法是：将 padding 提前定义在常态样式中，确保元素在默认和悬停状态下占据相同空间，仅通过 background-color 变化实现视觉反馈。
以下是优化后的关键 CSS 片段：
.nav {
display: flex;
justify-content: flex-end; /* 推荐使用语义更明确的值 */
align-items: center;
background-color: var(--clr-main);
height: 64px; /* 可选：显式设定高度，进一步增强稳定性 */
}
.nav-item {
margin-right: 10px;
padding: 10px; /* ✅ 预设内边距，消除悬停抖动 */
list-style: none;
}
.nav-link {
font-size: 20px;
text-decoration: none;
color: var(--clr-secondary);
font-weight: var(--fw-bold);
display: block;
padding: 8px 12px; /* 若需更精细控制链接点击区域，可在此微调 */
}
.nav-list {
display: flex;
padding: 0;
margin: 0; /* 确保无默认 ul 间距干扰 */
}
.nav-item:hover {
background-color: #00a6ff; /* ✅ 仅变更背景色，无尺寸变化 */
}? 额外建议：
- 若希望悬停背景完全贴合导航栏上下边缘，可将 padding 统一应用到 .nav-link（而非 .nav-item），并确保 .nav-link 设置 display: block —— 这样背景色会自然填充整个可点击区域；
- 使用 box-sizing: border-box 是良好实践，避免后续添加 border 导致尺寸溢出（可在全局重置中启用）；
- 对于响应式导航，建议配合 min-height 或 line-height 控制垂直居中，提升跨浏览器一致性。
通过提前声明静态 padding，你不仅解决了高度抖动问题，还提升了交互体验的流畅性与专业度。
