探究子元素宽高用百分比表示的计算方法

.big{
        width: 0;
	height: 0;
	padding-right: 200px;
	padding-bottom: 200px;
	background: pink;			
	margin-top: 200px;
	margin-left: 200px;
}
.inner {
	width: 50%;
	height: 50%;
	background: red;			
}
<div class="big">
	<div class="inner">			
	</div>
</div>

1. 正常情况
   ，子盒子的宽高是根据父盒子的宽高进行百分比运算，即inner宽高为0。
2. 当只有子盒子加了绝对定位，父盒子及其祖先都没有定位，其宽高百分比将根据浏览器可视宽高进行计算。
3. 如果其父元素进行了定位，宽高则根据父元素的盒子宽高（content + padding）（不含border！）进行百分比计算。
4. 如果其父元素进行了定位，宽高则根据父元素的盒子宽高（content + padding）（不含border！）进行百分比计算。

使用百分比布局的好处就是子元素的宽高是按父元素的宽高自动调节大小，有适应性，但由于元素默认的宽度有效，默认高度无效，因此盒子的父元素为时width="100%"height=“100%”，其高度设置是无效的，如该盒子无内容，仅设置了背景色和边框，则盒子背景颜色和边框也不显示。当盒子的定位方式为绝对定位或固定定位，即position属性值为absolute或fixed时，
父元素为时width=“100%” height=“100%”，其高宽设置均有效，默认为当前窗口的宽高百分比，
若设置了背景色和边框，则盒子背景颜色和边框均可显示。