css解决input和select的宽度不一致问题

在重构页面的时候，总会有个困扰，就是input和select的宽度默认不同，input总是比select长那么一点。如下图：



然后我们就开始各种调节width，但是一点变化都没有。这是为什么咧？

原因就出在了：input、select默认的样式是不同的，你无法通过直接改变width值去覆盖掉原来的默认样式，所以需要添加一个属性：

input,select{
box-sizing: border-box;
}

这个时候input和select宽度就一致了：

解释一下关于box-sizing：
1. border-box：  width为content+padding+border
2. content-box（默认属性值）： width的是content，padding以外的再另算。