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高)中可能还是会不对其,所以加上了。
一遍一遍的咀嚼,总会烂的。