寬度百分比單位的轉換公式
目標寬度÷上下文寬度=結果(比例寬度) 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%
歡迎關注本站公眾號,獲取更多信息