不知道大家有没有发现，在我们给input和select设置相同宽度的时候，input的实际宽度却比select的宽。造成这种现象的主要原因是属性box-sizing在作怪。W3C给出的介绍是这样的： box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。翻译成“人话”就是我们可以给当前的元素自定义宽高的计算范围。当然这句也不算人话。。。
直接举例子说吧， box-sizing的取值有两种：border-box跟content-box。
为元素设置：box-sizing: border-box，则表明width的宽度为内容本身宽度+padding+border（高度一样）
为元素设置：box-sizing: content-box，（默认就是这个），则表明width的宽度就是内容本身的宽度，padding以外的再另算。
而input、select默认的box-sizing是不同的，所以就造成了width设置的一样，但实际尺寸却不一样的现象。全部设成border-box或content-box就可以了。
未经允许不得转载：前端撸码笔记 » 为什么设置相同宽度input的实际宽度比select的宽？