标准盒模型与怪异盒模型 -form表单input对齐问题引发探讨及解决方案

标准盒模型与怪异盒模型
-form表单iput对齐问题引发探讨及解决方案
form表单中的input对齐问题：
用form表单input元素组合搜索框的时候，我们会发现两个同样设置30px高度input元素高度有相差，而无法上下对齐。

同样是相同高度的input元素怎么会出现高度不一致的结果呢？
究其原因是因为两个input的盒模型不同表现形式导致的，一个标准盒模，另一个是怪异盒模型。
首先来来了解两个盒模型的区别：
1.标准盒模型组成：{ content }+ padding + border + margin

2.怪异盒模型组成：{ content + padding + border } + margin

其差别在于，虽然两个盒模型都是相同的结构组成，但是其表现形式是不一样的，标准盒模型设置的height/width只作用在content区域，而怪异盒模型的height/width则作用在border及其以内区域。

综上所述：
第一个input输入框（type=”text”遵循标准盒模型规则）的height:30px；只作用内容区域，1px的padding和2px的border会额外增加在content以外区域，所以网页上表现出来的是36px的高，而不是定义30px的高度；
第二个input输提交按钮(type=”submit”遵循怪异盒模型规则) 的height:30px；作用在boder及其以内区域，1px的padding和2px的border会被固定在border范围内，元素不再被撑大，所以网页上表现出来的依旧是30px的高。

解决思路：通过box-sizing属性将不同的盒模型转化为同一盒模型即可。
1.给第一个input输入框添加：box-sizing:border-box;转化为怪异盒模型（网页表实际高度为30px）；

2.给第二个input输入框添加：box-sizing:content-box;转化为标准盒模型（网页表实际高度为36px）；

两个input的中间空隙则是由input是inline类型的元素（由于换行，空格等因素产生的）；可以给input添加flot：left；即可解决。