盒模型的width宽度 和box-sizing

width：auto|x%|length(px)：

　　　　width默认为auto自动填充满父元素的的内容宽度，这时给元素加上padding,border,margin时，元素width减小；width=父元素内容宽度-水平paddingx2-水平borderx2-水平marginx2

　　　　width设定成一个固定宽度（包括基于父元素内容宽度的百分比和固定数值），给元素加上padding、border、margin，元素的盒子宽度会增加；子宽度=width+水平paddingx2+水平borderx2+水平marginx2；

 

这里要说下盒模型的内容宽度：

　　　　默认width=content的width；元素的box-sizing的属性为content-box时也符合默认情况

　　　　box-sizing属性为border-box时，width=content的width+水平padding+水平border(不加上水平margin)，所以我们可以直接给元素加上box-sizing:border-box，然后就可以直接给内容设置内边距和边框，但不能直接设置外边距margin，，外边距还是要通过一个内部的样式div来设置，不过也没必要设置margin了。

 

盒子的宽度为width+水平padding+水平margin+水平boder.