1.Width（默认情况下为content box的宽度）
width:auto
元素content+padding+border+margin=父元素的width
<style>
.parent {
height: 400px;
width: 400px;
border: 1px solid black;
padding: 10px 10px;
}
.son {
height: 400px;
/* content+border+padding+margin = 400px of parent*/
width: auto;
border: 1px solid red;
padding: 0 2px;
margin: 0 2px;
}
</style>
<div class="parent">
<div class="son"></div>
</div>
width: 100%
元素content == 父content
<style>
.parent {
height: 400px;
width: 400px;
border: 1px solid black;
padding: 10px 10px;
}
.son {
height: 400px;
/* content = 400px of parent*/
width: 100%;
border: 1px solid red;
padding: 0 2px;
margin: 0 2px;
}
</style>
<div class="parent">
<div class="son"></div>
</div>
注意： 当子元素为absolute 绝对定位时，width:100% 相对于第一个非static的父元素而言
2. height(默认情况下为content box的高度）
height: 100%
**现象：**当父元素的height：auto时（即高度由子撑开时），子元素（非绝对）height:100%不起作用：
因为： auto * percentage % == NAN
解决办法： 1. 为父提供一个显式高度值 2. 设置子元素为绝对元素
1. 父设置显式高度
<style>
.parent {
height: 400px;
width: 400px;
border: 1px solid black;
padding: 10px 10px;
}
.son {
/* height = 400px of parent */
height: 100%;
width: 400px;
padding: 10px 0px;
border: 1px solid red;
}
</style>
<div class="parent">
<div class="son"></div>
</div>
2. 子元素设置为绝对元素:此时子元素高度相对于content + padding of parent
<style>
.parent {
height: 400px;
width: 400px;
border: 1px solid black;
padding: 10px 10px;
position: relative;
}
.son {
/* height = 400+20 of parent */
height: 100%;
width: 400px;
padding: 10px 0px;
border: 1px solid red;
position:absolute;
}
</style>
<div class="parent">
<div class="son"></div>
</div>
注意：与width相同，这种 子元素为absolute 绝对定位时，height:100% 相对于第一个非static的父元素而言
