宽度百分比单位的转换公式

目标宽度÷上下文宽度=结果(比例宽度)

 

当前元素的像素宽度÷当前元素的父元素的像素宽度=当前元素的百分比宽度 

例如：

[html]  view plain copy

1. <div id=wrapper>  
2. <header><header>  
3. <section></section>  
4. <aside></aside>  
5. </div>  

原CSS： 

[css]  view plain copy

1. #wrapper {width:1000px;}   
2. header {width:1000px;}   
3. aside {width:220px;float:left;}   
4. section {width:770px;float:right;}   

百分比宽度CSS： 

[css]  view plain copy

1. #wrapper {width:98%;}//指定外围宽度，数值随意   
2. header{width:100%;}//套公式1000÷1000(这个1000是wrapper的宽度)=1=100%   
3. aside{width:22%;float:left;}//套公式220÷1000=0.22=22%   
4. section{width:77%;float:right;}//套公式 770÷1000=0.77=77%