今天群里有哥們問了一下，百分比寬度的正方形如何用css實現。其實就是不定寬的正方形如何用css實現。
第一個方法利用圖片的等比例縮放，用base64寫一個1*1的透明png圖片，寬度100%，這樣容器就自動被撐成一個正方形，
demo如下
test*{
margin:0;
padding:0;
}
.img{
display:inline-block;
margin: 1%;
width: 30%;
background: #ff6600;
}
.img img{
width: 100%;
display: block;
}
提示：你可以先修改部分代碼再運行。
不過這樣寫的壞處是多了個img標簽，看著不干凈，于是想了另一種方法，就是利用padding的百分比值基于父容器寬度的特性，給div的after偽元素一個padding-top:100% 的值，這樣就把高撐的和寬度一樣了，demo如下：
test*{
margin:0;
padding:0;
}
.box{
display:inline-block;
margin: 1%;
width: 30%;
background: #ff6600;
}
.box::after{
display: block;
padding-top: 100%;
content : '';
}
提示：你可以先修改部分代碼再運行。
恩這樣看起來是不是清爽多了。
...)
