在響應(yīng)式布局要求下，很多能自動(dòng)調(diào)整尺寸的元素能夠做到高寬自適應(yīng)，如img戚宦，通過{width:50%;height:auto;}實(shí)現(xiàn)圖片高度跟隨寬度比例調(diào)整。
然而锈嫩，用的最多的Div卻不能做到自動(dòng)調(diào)整（只能從父級(jí)繼承受楼，或者自行指定px，要么給百分比祠挫，但是這個(gè)百分比是根據(jù)父級(jí)的高度來(lái)計(jì)算的那槽，不是根據(jù)元素自身的寬度，那么就做不到Div的寬高達(dá)成一定的比例）等舔。
要實(shí)現(xiàn)這種功能（div的高度：寬度=1:1）骚灸，有以下幾種處理方式
- 1，直接指定div的寬高+zoom來(lái)實(shí)現(xiàn)自適應(yīng)
div{width:50px;heigth:50px;zoom:1.1;}
這樣能達(dá)到初步的等寬高div慌植，但是局限性太大
- 2甚牲，通過js動(dòng)態(tài)判斷div的寬度來(lái)設(shè)置高度
div{width:50%;}
window.onresize = function(){div.height(div.width);}
也能實(shí)現(xiàn)等寬高div，但是總覺得有點(diǎn)別扭
- 3蝶柿，通過寬高單位來(lái)設(shè)置
div{width:20vw;height:20vw;/*20vw為屏幕可視寬的20%*/}
但是很多設(shè)備不支持這個(gè)屬性丈钙，兼容性太差
- 4，通過float來(lái)設(shè)置
#aa{background:#aaa;;}
#bb{background:#ddd;;float:left}
#cc{background:#eee;;float:right}
<div id="aa">父div
<div id="bb">子div</div>
<div id="cc">子div</div>
<div style="clear:both">就是這個(gè)用于clear錯(cuò)誤的</div>
</div>
能夠讓父級(jí)元素aa根據(jù)子元素的高度自動(dòng)改變高度（在子元素里放置自適應(yīng)元素）來(lái)調(diào)整高寬比一致交汤，然而太麻煩
- 5雏赦，終于到最終大殺器了劫笙，通過padding來(lái)實(shí)現(xiàn)此功能
通過以上幾個(gè)方案的實(shí)驗(yàn)，發(fā)現(xiàn)寬度的自適應(yīng)是根據(jù)viewport的width來(lái)調(diào)整的星岗，比如{width：50%}就是瀏覽器可視區(qū)域的50%填大，resize之后也會(huì)自動(dòng)調(diào)整。
而height指定百分比后俏橘，他會(huì)自行找到viewport的height來(lái)調(diào)整允华，跟width一毛錢關(guān)系沒有，自然兩者不能達(dá)到比例關(guān)系了寥掐。通過這個(gè)思路靴寂，要找到一個(gè)能跟viewport的width扯上裙帶關(guān)系的屬性，就能解決這個(gè)問題了召耘。
這個(gè)屬性就是padding百炬，padding是根據(jù)viewport的width來(lái)調(diào)整的，巧就巧在padding-top和padding-bottom也是根據(jù)viewport的width來(lái)計(jì)算的污它，那么通過設(shè)置這個(gè)屬性就能跟width達(dá)成某種比例關(guān)系了收壕，
我們首先指定元素的width為父級(jí)元素的50%（父級(jí)元素為任意有高寬的元素，不能指定特定父級(jí)元素轨蛤，否則影響此方案的通用性）
.father{width:100px;height:100px;background:#222}
.element{width:50%;background:#eee;}
這個(gè)時(shí)候我們?cè)僭O(shè)置element的height為0，padding-bottom:50%;
.element{width:50%;height:0;padding-bottom:50%;background:#eee;}
element就變成了一個(gè)寬度50%虫埂，高度為0（但是他有50%width的padding-bottom）的正方形了祥山，效果如下圖灰白色的div
這個(gè)時(shí)候可能有人要問了，這個(gè)div的高度為0掉伏，那如果我要在element里放置元素呢缝呕，那豈不是overflow了，這里就要提到overflow屬性了斧散，它的計(jì)算是包括div的content和padding的供常，也就是說(shuō)，
原來(lái)你的div可能是個(gè){width：50px;height:50px;padding:0}的div鸡捐，現(xiàn)在變成{width:50px;height:0;padding-bottom:50px;}的div了栈暇，尺寸還是一樣的，通過指定這個(gè)div的子元素的定位箍镜，一樣可以正常顯示
這樣就可以通過設(shè)定父級(jí)元素father源祈、我們需要的元素element、子級(jí)元素datail來(lái)實(shí)現(xiàn)任意情況下該需求（div寬高定比例）色迂。
