width：100% 与 auto

width：100% 与 auto

根据盒模型，分为两种情况

1. box-sizing: content-box

width：100%
表示子元素 width === 父元素的 width
即： 子元素 内容 === 父元素 内容

width：auto
表示子元素 margin + border + padding + width === 父元素的 width
即：子元素 外边距 + 边框 + 内边距 + 内容 === 父元素 内容

2. box-sizing: border-box

width：100%
子元素 width === 父元素 width - border -padding
即：子元素 边框 + 内边距 + 内容 === 父元素 内容

width：auto
子元素 margin + width === 父元素 width - border - padding
即：子元素 外边距 + 边框 + 内边距 + 内容 === 父元素 内容

总结：
width：auto 在两种模式下都一样，都是保证整个子元素恰好填满父元素的内容
width：100% 子元素的定义根据模式改变，父元素始终只拿出内容来比较