宽高为宽度百分比的正方形

假设让你写一个宽高为宽度百分之五十的正方形，那么该如何写呢？

① vw

　　vw 是一个单位，意思是把宽度分为100份，1vw就是宽度的百分之一，那么元素宽高都写成50vw就可以了

div {
    width: 50vw;
    height: 50vw;
    background-color: yellow;
}

② padding

　　padding 设置成百分比的话，是根据父元素的宽度的。那么我们可以利用这点达成效果

div {
    width: 50%;
    padding-bottom: 50%;
    background-color: yellow;
}

③ 利用 img 标签的高度自适应

　　先找一个正方形的图片，然后在div里面写一个img标签，引入这个图片，给图片宽度设置成百分之五十

div img{
    width: 50%;
}

　　是不是很简单呢？