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

问题：

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

小米官网的搜索框

 

我模仿的搜索框

         原来是因为我打开了网页缩放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>&#xe60d;</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%

 

        可以看到，当缩放从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;
}