在添加div时，对它的大小（宽、高）有两种设置方法：固定值和百分比。
1）若div的宽高为固定值，则该div的显示效果会随着其父div的缩放而变化。如下所示：
.fixed{
width:200px;
height:100px;
background:#F00;
}
2）若div的宽、高值为百分比，且其父div的宽、高值也为百分比，body的宽高默认未设置为指定值时，则该div的显示不会因为浏览器的缩放而变化如下所示：
<style type="text/css">
body{
background:#093;
margin:0px; /*body的margin默认是8px*/
border:0px solid #CF0;
}
.one{
background:#F33;
width:50%;
height:0;
padding-bottom:20%
}
.two{
background:#00f;
width:30%;
height:0;
padding-bottom:30%;
}
</style>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
原理：将div的高度height设置为0，这样它的内容就会溢出，需要将其padding-bottom也设置为百分比（该值取的也是其父div的宽度比例），这样这个div的高度也成比例了。