导航栏（Navbar）悬停元素时影响其他元素的布局问题

问题核心：鼠标悬停<li>时添加的边框会增加元素总尺寸，破坏原有布局，导致其他元素移位。

以下是几种可行的解决方式：

方法一：预设置透明边框占位 #

给默认状态的<li>添加与悬停时同宽度的透明边框，悬停仅修改边框颜色，元素尺寸始终保持一致，不会触发布局偏移。

修改后的CSS代码：

.navbar{
    height: 10vh;
    width:100vw;
    display: flex;
    justify-content: space-between;  
    background-color: #FF4858; 
}
.logo{
    font-size: 5vh;
    margin:auto 2vw;
    font-weight: bold;
}
ul{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width:50%;
}
li{
    padding:10px;
    margin:0px 3vw;
    border:1px solid transparent; /* 预添加透明边框占位 */
}
li:hover{
    color:white;
    border-color: white; /* 悬停时修改边框颜色 */
    border-radius: 6px;
}

方法二：使用outline替代border #

outline不会占据元素的布局空间，添加后不会影响周围元素位置，但注意outline不支持border-radius，若不需要圆角效果可选用此方法。

修改后的hover样式：

li:hover{
    color:white;
    outline:1px solid white; /* 用outline替换border */
}

方法三：通过box-sizing调整内边距抵消边框尺寸 #

给<li>设置box-sizing: border-box，让边框纳入元素尺寸计算，同时在悬停时减少对应宽度的内边距，抵消边框增加的尺寸。

修改后的CSS代码：

li{
    padding:10px;
    margin:0px 3vw;
    border:none;
    box-sizing: border-box; /* 边框计入元素尺寸 */
}
li:hover{
    color:white;
    border:1px solid white;
    border-radius: 6px;
    padding:9px; /* 内边距减少1px，抵消边框宽度 */
}

内容的提问来源于stack exchange，提问作者Vinay chandola