关于width=100%&width=auto的区别

最近在学习前端的一些基本知识，今天碰到了一个问题，关于width的问题

首先是width=100%:

当width=100%时，

子元素的宽度是继承的父元素宽度，不包括子元素设置的margin padding 和border部分

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（等于父级元素的宽度)，

此时如果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}

会发现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：

<div class="main">
  <div class="right">right</div>
</div>

子元素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会怎么变化后面再讨论。