width:100%与width:auto区别

width:auto

子元素（包括content+padding+border+margin）撑满整个父元素的content区域。
父元素的content = 子元素（content + padding + border + margin )

 <div class="father">
     <div class="son"></div>
 </div>

.father {
      width: 100px;
      height: 100px;
      border: 10px solid pink;
      background-color: green;
}
.son {
     width: auto;
     height: 50px;
     margin-left: 10px;
     background-color: orange;
}

width:100%

子元素的content区域 撑满 父元素的content区域

子元素有margin、border、padding时，溢出父盒子，保持原有值

父元素的content = 子元素的content 

.son{width:100%}