CSS对盒子hover时设置border导致盒子内元素发生位移的解决方法

学习CSS时发现：当我想要鼠标移到某个盒子显示border边框线时，却发现盒子内的元素会发生位移和错位

原因：显示border时边框线会占用原有盒子空间，所以会导致挤压盒子内的元素，产生位移

解决方法：定义盒子大小时就设置border，让边框线隐藏或者和背景一个颜色

li{
    width: 205px;
    height: 300px;
    border: 1px solid transparent;
    /* 或者 */
    /*border: 1px solid 你的背景色; */
}

li:hover{
    border: 1px solid rgb(33, 209, 176);
}

这样就可以完美解决，记录一下