wdith=100%与width=auto

1. 当width=100%时，子元素继承父元素的宽度，但不包括子元素设置的padding,margin,border.

css样式：

.aa{
width:400px;height:200px;background-color:red;
}
.bb
{width:100%;height:100px;background-color:blue;
}

html样式：

<div class="aa">
<div class="bb">biu</div>
</div>	

如图，aa的宽度为400px,高度为200px，bb的宽度也为400px，高度为100px。

2.如继续给子元素（bb）设置margin，padding，border等

css样式

.bb{
width:100%;height:100px;background-color:blue;padding-left:100px;
}

如图，bb的宽度width=400px+100px

1.当width=auto时，父元素的width=子元素的width+子元素border+子元素margin+子元素padding。

css样式

.aa{
	width:400px;height:200px;background-color:red;
}
.bb{
	width:auto;height:100px;background-color:blue;
}

html样式：

<div class="aa">
<div class="bb">biu</div>
</div>	

如图，子父元素的宽度都为400px

2.如继续给子元素加上padding，margin等。

css样式

.aa{
	width:400px;height:200px;background-color:red;
}
.bb{
	width:auto;height:100px;background-color:blue;margin-right:100px;
}

html样式

<div class="aa">
<div class="bb">biu</div>
</div>	

如图，父元素的宽度为400px，子元素的宽度为400px，其中margin-right为100px