border受缩放影响

现象

今天放了一行的盒子，缩放了一下发现最后一个盒子掉下去了，用F12一看发现盒子的大小居然发生了改变，而设置的样式却依旧生效。而当我去掉了border之后，发现再怎么缩放盒子的大小也不会改变了，所以border会受缩放的影响。

思考

为什么会发生这种事情呢？在我搜索了一番后还是不能理解，一种说法是说：在缩放时，浏览器会将border等比例放大，当放大之后的大小不是整数时会发生精度的丢失。

解决方案

1. 预留空白，不使用border
   在盒子之间预留空白，而不直接使用border进行分割。
2. 使用box-sizing属性
   先来看看什么是box-sizing
box-sizing属性有三个值
   inherit:从父级继承此属性

• content-box:默认值，在计算width和height的时候不计算border、padding、margin。宽高都只是内容高度
• border-box:width和height属性包括内外边距border、padding，但不包括外边距margin
  只要使用box-sizing:border-box将边框纳入宽高的计算，就可以保证盒子大小不变