当width=100%时，
css样式：
.main{background:red;height:40px;width:700px;font-size:30px; color:#fff;height:80px;}
.right{background:green;height:40px;width:100%; }
html：
<div class="main"> <div class="right">right</div> </div>
main的width为700px，left的width为100px。如果right的width设置为100%，那right的width=700px（等于父级元素的宽度)，
img
此时如果left设置padding值的话例如padding-left：100px；会变成下面这样：
css样式：
.main{background:red;height:40px;width:700px;font-size:30px; color:#fff;height:80px;}
.right{background:green;height:40px;width:100%; padding-left：100px}
img
会发现right部分溢出main,我个人认为此时right产生了一个新的width值800px，700+100=800px；至于如果子元素添加margin或者border等属性时right的width值会怎么变化后面再讨论；
当width=auto时，
css样式：
.main{background:red;height:40px;width:700px;font-size:30px; color:#fff;height:80px;}
.right{background:green;height:40px;width:auto; }
html：
<div class="main"> <div class="right">right</div> </div>
img
子元素right此时没有设置其他属性，所以width=700px；
如果right设置一个margin-left：100px；
css样式：
.main{background:red;height:40px;width:700px;font-size:30px; color:#fff;height:80px;}
.right{background:green;height:40px;width:auto; margin-left:100px;}
img
会发现right的width变成了600px，减去了外边距的值；当设置margin或者border属性时right的width会怎么变化后面再讨论。
原文：https://www.cnblogs.com/c1nema/p/14596736.html