width：100%与width：auto的区别

width：100%

width：100%代表自身Width=父contentWidth*100%

其中当自身box-sizing:content-box（也是默认值）时，自身Width的含义为自身contentWidth，当box-sizing:border-box（IE盒模型，IE8及以下只支持IE盒模型）时，自身Width的含义为自身contentWidth+paddingWidth+borderWidth。（在IE8及以下的浏览器中只支持IE盒模型，在IE8+及其他主流浏览器中，通过CSS新增的box-sizing属性可以设置浏览器的盒模型。box-sizing属性的默认值是content-box，即W3C标准盒模型；而将box-sizing值设置为border-box时，则会更改为IE盒模型）

	
		
		
		
	

	
		

			father
			

				child
			
		
		
	

 

width：auto

width：auto代表自身contentWidth+paddingWidth+borderWidth+marginWidth=父contentWidth

其中当自身box-sizing:content-box（也是默认值）时，width值为contentWidth，当box-sizing:border-box（IE盒模型，IE8及以下只支持IE盒模型）时，width值为contentWidth+paddingWidth+borderWidth。

	
		
		
		
	

	
		

			father
			

				child