鼠标悬停 边框会撑大盒子

前几天在开发中遇到了这样一种情况：
理想效果图：
但实际上第一次写出来却是这样的效果：

先上解决办法：给每一个小盒子添加一个和鼠标悬停时的边框大小相同的透明边框。
例如：
当鼠标悬停时，此处设的是1px的橙色边框，相应的在每个小盒子上加一个1px的透明边框。

  原理：border边框会撑大盒子，即使给小盒子设置了box-sizing:border-box属性，在鼠标悬停前添加边框的确不会更改盒子大小，但在鼠标悬停后添加的边框还是会算作新添加的元素，此时就会挤压到盒子里面的内容，造成图上的效果。

  当我们以后在开发中遇到这种鼠标悬停更改盒子大小的情况，都可以为原来的盒子设置一个透明边框占位。