width：100%和width：auto的区别

标准盒子模型和IE盒子模型的介绍

• 标准盒子模型

 从上图可以看出标准盒子模型的范围包括 margin 、border、padding、content，并且content部分不包含其他部分，就为我们在样式上所设置的宽高。

• IE盒子模型（怪异盒子模型）

从上图可以看出，IE盒子模型的范围也是包括  margin 、border、padding、content，但和标准盒子模型不同的是，IE盒子模型的content部分包含border部分和padding部分，即我们在样式中所设置的宽高包含了content、border、padding三部分。

子元素设置width：100%

若子元素设置 width: 100%  就相当于子元素的 content 部分 （width）就为父元素的content部分，若设置border和padding就有可能超出父级盒子

子元素设置width：auto

若子元素设置width:auto 就相当于子元素的整个盒子模型的范围就是父元素的content部分，即子元素的margin, border, padding, content 区域会自动分配水平空间 ，所以子元素在宽度不为0的情况下就会始终在父元素中。

总结

width: 100%容易造成子盒子溢出父级盒子

width: auto 使用比较灵活

所以一般建议使用width: auto而不是width: 100%