问题：

最近在模仿小米官网的静态网页，写到一半忽然发现 我的搜索框怎么掉下去了？

原来是因为我打开了网页缩放80%，于是我试着把网页缩放调回100%，果然不出我所料，我的搜索框恢复了原样。

看起来只要不改变网页大小就再也不会出现问题，但是一但改变网页缩放大小，我的搜索框就会掉下去，这样可不行。为了更好的用户体验（太丑了！），我觉得去研究一下如何解决这个问题。

我的代码：

可以看到我的写法就是在一个大的<div>中放了两个左浮动的<input>和<a>。而我在css所设置的<div>的宽度刚好是<input>和<a>的宽度之和，因此他们在100%的情况下刚好能够挤在一起。

html部分代码：

    <div class="header-search clearfix"><input type="text" placeholder="空气净化器"><a href="#" class="iconfont"><i></i></a></div>

css部分代码

.header-search>input {float: left;width: 223px;height: 48px;padding: 0 10px;border: 1px solid #e0e0e0;font-size: 14px;transition: all .2s;
}.header-search>a {float: left;display: block;margin-left: -1px;width: 50px;height: 48px;line-height: 46px;font-weight: 1000;background-color: #fff;border: 1px solid #e0e0e0;transition: all .2s;
}.header-search>a>i {font-size: 18px;color: #616161;
}

问题产生原因：

于是我继续缩放我的网页，发现了造成这个问题的真凶！它就是 边框 (border) ！当我缩小网页时，系统会自动给我的 <input> 和 <a> 加粗边框 (border)。边框会影响盒子大小，它就导致我的盒子比我预设的大小要更大。那么当两个浮动的子盒子的宽度大于父盒子的宽度时，后面的子盒子 <a> 就被挤到了下一行去！

而且这个边框的大小会随着缩放的大小而变化！

可以看到，当缩放从75%变到50%，边框从1.333变到了 2。

问题解决：

给两个子盒子设置 box-sizing: border-box ，将他们变成怪异盒模型。

被设置为怪异盒模型的盒子的宽度和高度不再受padding、border影响！是一个固定值。详细用法见：

W3C：CSS Box Sizing

修改后的CSS代码：

给 <input> 和 <a> 都设置成怪异盒模型，并修改宽高为总宽高。之后缩放网页，我的搜索框就再也不会掉下来啦。

.header-search>input {float: left;width: 225px;height: 50px;padding: 0 10px;border: 1px solid #e0e0e0;font-size: 14px;box-sizing: border-box;transition: all .2s;
}.header-search>a {float: left;display: block;margin-left: -1px;width: 52px;height: 50px;line-height: 46px;font-weight: 1000;background-color: #fff;border: 1px solid #e0e0e0;box-sizing: border-box;transition: all .2s;
}.header-search>a>i {font-size: 18px;color: #616161;
}

Html网页按住Ctrl+滚轮缩放后，盒子大小改变的罪魁祸首竟是border？（已解决）相关推荐

css网页检查不变形怎么办,我用css做的网页，只要进行缩放，盒子就乱了，怎么让网页因缩放而变形？...
我用css做的网页,只要进行缩放,盒子就乱了,怎么让网页因缩放而变形?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 我 ...
webstorm设置Ctrl+滚轮缩放字体大小
webstorm设置Ctrl+滚轮缩放字体大小 1.打开webstorm软件,点击左上角的file 2.点击Setting(设置) 3.点击Editor 4.点击General 5.勾选右侧的Chan ...
系统自适应，Ctrl+滚轮缩放界面等比例放大（页面不乱）
Ctrl+滚轮缩放界面等比例放大,并且保持页面不乱,实现比较简单获取当前浏览器比例,然后将body的高度.宽度拉伸一下就OK function ChangeRatio() {var ratio = 0 ...
Winform中实现ZedGraph滚轮缩放后自动重新加载数据
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
IDEA设置（Ctrl+滚轮）调整字体大小，快捷键调整字体大小
IDEA设置Ctrl+滚轮调整字体大小打开idea 设置界面: 保存后,ctrl+滚轮就能改变代码字体大小
IDEA快捷键调整字体大小设置（Ctrl+滚轮）调整字体大小
IDEA设置Ctrl+滚轮调整字体大小第一步:打开idea 设置界面: 第二步:勾选上下图中红色部分即可实现保存后,ctrl+滚轮就能改变代码字体大小
CSS-浏览器缩放使边框大小改变，导致布局改变的问题
HTML代码: <div class="box"><ul><li>1</li><li>2</li><l ...
页面导航栏在鼠标向下滑动后会漂浮在顶部的设计（已解决）
文章目录 1,动态演示效果图 2,设置相对定位的静态网页排版 html代码 >>> css代码 >>> 3,获取页面标签后进行事件监听 js代码 >>& ...
svn从本地更新了资源库的资源后删除了某个文件夹无法恢复(已解决)
事件描述: 删除了本地svn的某个文件夹中的某个文件后,想要恢复,但是无法恢复,解决方法如下步骤: 1:在删除的文件夹下右键,选择TortoiseSVN-->Revert... 2:选择需要恢 ...

Html网页按住Ctrl+滚轮缩放后，盒子大小改变的罪魁祸首竟是border？（已解决）

问题：