当为导航菜单项添加悬停背景色时，若仅在 :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，你不仅解决了高度抖动问题，还提升了交互体验的流畅性与专业度。