今天在看代码的时候看到width=100%，查询后知道
当width=100%时，子元素的宽度是继承的父元素宽度
不包括子元素设置的margin padding 和border部分
width=100%,父级元素宽度不变，width=auto父级元素宽度随子元素变化。
css样式：
.main{background:red; width:700px; font-size:30px; color:#fff; height:80px;}
.right{background:green; height:40px; width:100%; }
html：
right
main的width为700px，left的width为100px。如果right的width设置为100%，那right的width=700px（等于父级元素的宽度)，
此时如果right设置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}
会发现right部分溢出main,我个人认为此时right产生了一个新的width值800px，700+100=800px；至于如果子元素添加margin或者border等属性时right的width值会怎么变化后面再讨论；
当width=auto时，
父元素的width=子元素的width+子元素border+子元素margin+子元素padding
css样式：
.main{background:red;height:40px;width:700px;font-size:30px;color:#fff;height:80px;}
.right{background:green;height:40px;width:auto; }
html：
right
子元素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;}
会发现right的width变成了600px，减去了外边距的值；当设置margin或者border属性时right的width会怎么变化后面再讨论。
