css3(box-sizing调整布局，统一form表单)

1、box-sizing:content-boz(w3c盒模型width=content+padding+width,height亦是)/border-box（Ie传统模型width=content-padding-border,height亦是）

2、调整布局：在常见的左右布局页面中，如果稍微改变（加border,padding）就会导致布局全乱
正常情况下是这样的


如果我给右边页面上加上一个20px的边框，就成了这样


布局就乱了，如果是以前可能就要去改右边这块的长宽。
但是再有了boxsing后就不用了
只要在我们的css代码中加上

.right{
		float: left;
		width: 48%;
		background: green;
		border: 20px solid blue;
		box-sizing:border-box;
	}

布局就好了


这个可能需要你先去了解一下w3c盒模型与传统的ie盒模型


3、form表单
(1)、【type="submit"】、【type="reset"】、button、【type="text"】、select、textarea默认情况下都有2px的border;

(2)、【type="submit"】、【type="reset"】、button默认情况下会有6px的左右padding；height在mac系统下会比在winxp win7系统下少1px,只有16px,（12px的字体时高度为17px）;

(3)、【type="text"】默认情况下会有1px的上下padding；WinXP和Win7下高度为15px，Mac系统下为14px

(4)、【type="checkbox"】默认情况下会有margin：3px 3px 3px 4px,并且宽/高度默认为13px(IE6，IE7默认大约是15px，Mac系统下只有9px)

(5)、【type="radio"】默认情况下会有margin: 3px 3px 0 5px的外边，并且宽/高度默认为13px（IE6,IE7默认大约是15px,Mac系统下只有9px）

(6)、textarea默认情况有1px的上下margin；
综上所述：只有【type="text"】和textarea是遵循w3c盒模型，其他都是传统ie，我们将他们所有的padding:0、margin:0、border:1px设置。
但是在这种情况下【type="checkbox"】【type="radio"】宽度仍然不统一
在给他们加上[box-sizing:border-box]在IE6/7下仍不兼容，所以这里还需要用到hack.