初学者常因在 :hover 状态中修改按钮宽高（如设置 width/height）引发布局重排，导致下方内容跳动；正确做法是使用 transform: scale() 实现视觉放大，不触发重排，保持文档流稳定。
初学者常因在 `:hover` 状态中修改按钮宽高（如设置 `width`/`height`）引发布局重排，导致下方内容跳动；正确做法是使用 `transform: scale()` 实现视觉放大，不触发重排，保持文档流稳定。
在 HTML 和 CSS 入门实践中，一个高频且令人困惑的问题是：导航栏按钮悬停时，页面其他内容突然“下移”或“抖动”。这并非代码逻辑错误，而是对 CSS 布局机制理解不足所致——本质是 意外触发了文档流重排（reflow）。
? 问题根源分析
观察原代码中的关键片段：
.cn:hover {
color: black;
font-weight: bold;
background-color: white;
height: 35px; /* ❌ 危险：改变尺寸会破坏原有行内布局 */
width: 90px; /* ❌ 危险：同上 */
border-radius: 10px;
transition: all 1s;
}当为 .cn 按钮添加 height 和 width 时，浏览器必须重新计算该元素在行内流（inline flow）中的占位空间。由于这些按钮默认是 display: inline-flex（属于行内级元素），其尺寸突变会挤压相邻元素，进而影响整个 <nav> 行高，并波及后续 <div class="text"> 等块级元素的位置——这就是你看到“页面内容被推下去”的根本原因。
✅ 正确解法：用 transform 实现无损缩放
transform 属性作用于元素的渲染层（paint layer），不改变文档流尺寸，因此不会触发重排，仅产生视觉变化。推荐方案如下：
.cn:hover {
color: black;
background-color: white;
border-radius: 10px;
transition: all 0.3s ease; /* 建议缩短时长，更自然 */
transform: scale(1.1); /* ✅ 安全放大 10%，无布局干扰 */
}? 小贴士：scale(1.1) 是相对缩放，支持平滑过渡；若需微调位置，可配合 transform-origin: center 控制缩放基点（默认即居中）。
?️ 同时优化的几处关键细节
移除冗余样式
删除 .cn:hover 中的 height、width、display: inline（继承父级即可）、margin-right: 0（无实际作用），精简代码更易维护。-
统一字体族名大小写
@font-face 中定义的是 font-family: title;，但选择器中误写为 font-family: Title;（CSS 字体名区分大小写）。请统一改为小写：nav > h2 { font-family: title; } /* ✅ 与 @font-face 严格一致 */ -
避免 inline-flex 与 margin-left 混用导致间隙不可控
推荐将导航项包裹在 flex 容器中，实现精准对齐：nav { display: flex; align-items: center; padding: 0 20px; } .cn { margin: 0 12px; /* 替代分散的 margin-left */ flex: 0 0 auto; /* 防止按钮被压缩 */ } #hm { margin-left: 0; } /* 首个按钮左侧不留空 */ -
增强可访问性与语义化
<nav> 内应包含语义化链接而非纯按钮（除非有 JS 动态行为）：<a href="#home" class="nav-link">Home</a>
并为其添加 :focus 样式，满足键盘导航需求。
? 总结：新手避坑三原则
- 不改尺寸，只变形态：悬停效果优先用 transform、opacity、color 等不触发布局的属性；
- 善用 Flex 布局：替代 inline-block + margin 的“手工对齐”，让导航栏自适应、易维护；
- 验证字体与选择器一致性：@font-face 的 font-family 值必须与 CSS 中完全匹配（含空格、大小写）。
掌握这一原理后，你不仅能解决当前问题，更能避开大量因“无意修改盒模型”引发的布局陷阱——这才是真正迈向 CSS 成熟实践的关键一步。
