用僞類實現一個div的寬度和高度是固定百分比

遇到一個題目：一個div寬度是固定百分比的狀況下，如何設置高度是寬度的80%

看到題目的第一反應是用js控制，獲取到div的寬度以後再用寬度的80%來設置div的高度，可是如何在不用js的狀況下，只用CSS來實現呢

下面是示例代碼：

HTML代碼：

<div class="outer"></div>

CSS代碼：

.outer{ width: 30%; background: #eee;
} .outer:after{ content: ''; display: block; padding-top: 80%;
}

效果如圖：

上圖中，寬度是高度的80%，那麼實現原理是什麼呢？

由於div的寬度是30%而沒有設置高度，當設置div的僞類padding-top是80%時，本該以高度爲標準的，可是沒有高度便會默認以寬度爲標準，

僞類的padding-top設置成80%便會把父元素撐開，此時div就算沒有設置高度也會被撐開，而且高度是寬度的80%；

那麼想實現一個響應式的正方形就容易多了，只要設置div的僞類padding-top是100%便可，這樣div將一直是一個正方形

最後總結一下：padding-top & padding-bottom 這兩個css屬性，父節點沒有固定高度，他們就會參照父節點的寬度來設置本身的百分比；

（組內大神總結出來的解決辦法，by新手小白的記錄）