今天一个同学问了一个问题，说是如何解决输入框和按钮底部不对齐的问题，类似的代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {
box-sizing:border-box;
}
input{
padding:0;
margin-right:20px;
}
div{
height:40px;
font-size:0;
}
#text{
width:100px;
height:40px;
border:1px solid black;
}
#btn{
width:60px;
height:40px;
line-height:40px;
text-align:center;
background:red;
border:1px solid black;
}
</style>
</head>
<body>
<div>
<input type="text" id="text" />
<input type="button" id="btn" value="按钮"/>
</div>
</body>
</html>
解决方法：给input便签加一个
input {
vertical-align:bottom;
}
vertical-align用于调整inline级的元素，这些元素的display是：inline ,inline-block,inline-table,
上述问题的原因就是他们的元素的vertical-align不一致导致的
