css3使用box-sizing布局

css3增添了盒模型box-sizing,有三个属性值
content-box:默认值，让元素维持w3c的标准盒模型。元素的width/height等于border的宽度加上padding值加上元素内容的width/height，(默认内容区大小不会变)
即Element Width/Height = boder + padding + content width/height;
border-box:让元素维持IE6及以下版本盒模型，元素的width/height等于元素内容的width/height，
即：Element Width/Height = width/height-border-padding。
inherit:继承父元素的盒模型模式。
其中最重要的就是border-box,如果遇到不影响其他区域布局，还要给元素加padding、border的情况，使用border-box元素所占空间不会变，加padding、border会往内挤，保持外面容器不被破坏。（注意：margin不包含在元素空间，加了margin会向外撑开）。
兼容性：IE8+及其他主流浏览器均支持box-sizing。其中IE6及以下默认是以类似border-box盒模型来计算尺寸。
（ps：Firefox浏览器，box-sizing还可以设置一个padding-box，指定元素的宽度/高度等于内容的宽度/高度和內距，
   即：Element Width/Height = content width/height+padding。）