AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > css教程

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

51自学网 http://www.wanshiok.com
宽度,百分比单位,转换公式目标宽度÷上下文宽度=结果(比例宽度)

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

例如:

复制代码
代码如下:

<div id=wrapper>
<header><header>
<section></section>
<aside></aside>
</div>

原CSS:

复制代码
代码如下:

#wrapper {width:1000px;}
header {width:1000px;}
aside {width:220px;float:left;}
section {width:770px;float:right;}

百分比宽度CSS:

复制代码
代码如下:

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

宽度,百分比单位,转换公式  
上一篇:解决中文版Chrome下网页不能显示小于12px字体  下一篇:背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)