富贵资源网 Design By www.hznty.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%
当前元素的像素宽度÷当前元素的父元素的像素宽度=当前元素的百分比宽度
例如:
复制代码代码如下:
<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%
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...