新手入门前端1—— width=100%

今天在看代码的时候看到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会怎么变化后面再讨论。