前言
最近在跟着 pink 老师在学习 html和css
在做学成在线项目的时候，对于那个搜索框的制作
在我做完测试的时候，缩放却发现原本好好的浮动，却掉下来一个
这就很奇怪了
原因
看了一下 chrome 工具里面的盒子大小发现，前后两个缩放比例导致盒子的边框发生了变化。
如下图
经过查询后发现：当初始边框为1px时，浏览器窗口缩小导致边框小于1px，但是浏览器窗口能显示的最小边框为1px。此时浏览器会将原本的边框1px按比例变大 即出现上图中1.333大小的边框
解决方法
根据大佬https://blog.csdn.net/O3O_O3O_/article/details/121255024的文章可以知道
以下全为复制 因为我本人并不知道解决方案(还没学)
给 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 就会掉出第一行
单纯记录一下学习过程
