input和button不同高 和 rem

• rem的使用

  浏览器中默认的字体大小是 16px，此时为 100%。当我们在使用 rem 的时候，常常给 html设置为 html{font-size:62.5;}，这样的好处是 1rem 刚好为 10px。
  同时我们常常写两个 font-size，一个用来兼容不支持 rem 属性的浏览器，在我们使用calc的时候也常常设置两个保证代码的兼容性.

• 为什么input(text)和button的高度相同却没有对齐

  因为 input 的高度算法和button不同，可以说input是非常另类的 (而且在不同浏览器中也是另类的

        .searchBar input{
            height: 25px;
            box-sizing: border-box;
            border: 0;
            vertical-align: middle;
        }
        .searchBar button{
            width: 50px;
            height: 25px;
            border: 0;
            vertical-align: middle;
        }

如上设置即可，如果不加 vertical-align: middle; 在不同的浏览器（每个浏览器表现不同，比如chrome中情况是button在位置上比input高）中可能还是会不对其，所以加上了。

转载于:https://www.cnblogs.com/can-i-do/p/7510016.html