【：hover 加边框导致下面盒子抖动】

问题描述

本身盒子无边框，启用：hover之后加上1px的边框，这时候对外显示的效果是盒子整体出现抖动

原因

box-sizing: border-box;
css3盒子模型的特性决定了：盒子宽高已定的情况下，后续加上边框和padding并不会改变盒子最初的大小。因此，盒子大小不变，新加上的边框只会挤压盒子内部内容物的空间，从而再度调整内容排列。

解决办法

在一开始的时候给这个盒子加上边框，边框颜色设置为透明色或者设置与背景色一样的颜色，这样一来，鼠标经过这个盒子不会在出现抖动现象

.list-item-box {
    border: 1px solid transparent;
    cursor: pointer;
    &.active {
      background: #fff !important;
      box-shadow: 0px -2px 6px 6px #eee;
    }
    &:hover {
      background: #fff5f2 !important;
      opacity: 1;
      border: 1px solid #f30000;
    }
  }