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

目标宽度÷上下文宽度=结果(比例宽度)
<wbr><div> <strong>当前元素的像素宽度÷当前元素的父元素的像素宽度=当前元素的百分比宽度</strong><wbr><div><br></div> <div>例如:</div> <div><pre name="code" class="html">&lt;div id=wrapper&gt; &lt;header&gt;&lt;header&gt; &lt;section&gt;&lt;/section&gt; &lt;aside&gt;&lt;/aside&gt; &lt;/div&gt;</pre></div> <div><br></div> <div> <div><code></code></div> 原CSS:<wbr><div><pre name="code" class="css">#wrapper {width:1000px;} header {width:1000px;} aside {width:220px;float:left;} section {width:770px;float:right;} </pre></div> <div><br></div> <div>百分比宽度CSS:<wbr></wbr> </div> <div> <pre name="code" class="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%</pre> <br> </div> </wbr> </div> </wbr> </div> </wbr>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值