CSS-浏览器缩放使边框大小改变，导致布局改变的问题

HTML代码：

<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

CSS代码： 

* {
  margin: 0;
  padding: 0;
}

.box {
  width: 1200px;
  height: 300px;
  margin: 100px auto;
}

li {
  float: left;
  width: 288px;
  height: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
  list-style: none;
  border: 1px solid red;
  text-align: center;
  line-height: 200px;
  font-size: 30px;
  font-weight: bold;
}

浏览器未缩放情况下，显示如下：

 将浏览器窗口缩放到75%

 检查发现此时 li 的 border 变为1.067px

 浏览器缩放到50%，border 变为 1.6px

 导致这种情况出现的原因是：当初始边框为1px时，浏览器窗口缩小导致边框小于1px，但是浏览器窗口能显示的最小边框为1px。此时浏览器会将原本的边框1px按比例变大，此时边框实际已经不是1px了，超出了父盒子的宽度，所以最后一个 li 掉入第二行

如：浏览器缩放到50%时，边框也会变小，浏览器检测到边框小于1px，便将边框变为1.6px，再将已经变大后的边框缩小。（这样可以保证不管浏览器如何缩放，也不会出现边框看不到的情况。

解决办法：给 li 设置 box-sizing : border-box

li {
    box-sizing:border-box;
    width:290px;
}

 border-box 的意思是 li 包括内容+边框的总宽度为290px。即使浏览器缩小导致边框变大，li 的总宽度都为290px；

box-sizing的默认值是content-box，之前未设置box-sizing: border-box时，  width:288px，这个288px是内容的宽度，li 的总宽度为288px+左右边框和 2px = 290px。如果浏览器缩小导致边框变大，li 的总宽度也会大于290px，当4个 li 的宽度总和超过父盒子的宽度时，最后一个 li 就会掉出第一行