当为元素添加 `box-shadow` 时，若其 `display` 属性在悬停前后发生变化（如从默认 `inline` 变为 `inline-block`），会导致布局重排，使下方内容跳动；解决方法是将 `display: inline-block` 提前声明在常态样式中，确保渲染流稳定。
这是典型的 CSS 布局抖动（layout shift）问题。HTML 中自定义标签 文本被“推下”，产生肉眼可见的位移。 ✅ 正确做法：将 display: inline-block 提前写入常态样式（即非 hover 状态），使元素始终以 inline-block 参与文档流，后续仅改变 background-color 和 box-shadow 这类不影响几何尺寸的属性，即可彻底避免重排。 以下是修复后的完整代码示例： ⚠️ 注意事项： 总结：布局稳定性源于样式变更的原子性。只要确保悬停前后元素的盒类型（display）、尺寸模型（box-sizing）、定位方式（position）等影响布局的属性保持一致，仅变更绘制属性（颜色、阴影、透明度、transform），就能实现丝滑、无跳动的交互效果。butto {
border: none;
outline: none;
background-color: white;
padding: 2px;
cursor: default;
display: inline-block; /* ✅ 关键：提前声明，保持布局稳定 */
/* 可选：添加 vertical-align 避免基线对齐干扰 */
vertical-align: middle;
}
butto:hover {
background-color: #e3e3e3;
box-shadow: 2px 2px grey; /* 不再触发 display 变更，无位移 */
}
html {
background-color: black;
}<butto onclick="print()" class="no-print">Print</butto>
<p style="color: white; margin-top: 8px;">Text below!</p>
