遇到一個題目：一個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新手小白的記錄）