宽度百分比企业的变换公式及示例

日期:2021-01-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

总体目标宽度÷左右文宽度=結果(占比宽度)

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

比如:

拷贝编码
编码以下:

<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%