解决设置盒子边框hover效果时所产生的抖动

1.第一种方法：

在原有的盒子里设置好边框，把边框的颜色设置隐藏transparent

       例： div{

            width: 270px ;

            height: 200px;

            background-color: white;

            border: 5px solid transparent;

        }

        div：hover{

            color: red;

        }

解：把边框提前设置出来隐藏颜色，再给边框设置hover效果设置颜色就可以了

2.第二种方法：

用box-sizing控制盒子的width、height  组成部分

可选值：content-box    意思是默认情况下，盒子width指的是内容区宽度

border    意思是盒子的width和height指的是内容区，内边距，边框的大小

我们用border举个例子

例：

        div {

            width: 200px;

            height: 200px;

            background-color: #bfa;

            box-sizing: border-box;

        }

        div:hover{

            border: 10px solid red;

        }

解：先在盒子里提前设置好边框，再在hover效果里设置颜色、大小和样式