手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >宽度百分比单位的转换公式及示例
宽度百分比单位的转换公式及示例
摘要:目标宽度÷上下文宽度=结果(比例宽度)当前元素的像素宽度÷当前元素的父元素的像素宽度=当前元素的百分比宽度例如:...

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

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

例如:

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

【宽度百分比单位的转换公式及示例】相关文章:

20个实用便捷的CSS3工具、库及实例

position:fixed或absolute时百分比参考屏幕宽度

实现div垂直居中的display:table-cell方法示例介绍

css强制文字不换行实现代码

css控制div中元素居中的示例

CSS写的简单表格示例

自适应宽度的div+css示例

如何让文字滚动后自动停止效果示例

Visual C++中实现对图像数据的读取显示

屏蔽双击选中文字的方法兼容FF及以外的浏览器

精品推荐
分类导航