每日一题day12：在移动端如何使用css实现一个正方形？

1.padding-bottom

*{
                    margin: 0;
                    padding: 0;
                }
                .box{
                        width: 20%;
                        /* 设置height为0 ，避免盒子被内容撑开多余的高度 */
                        height: 0px;  
                        /*如果这里没有写height：0px；当盒子里面有内容的时候，盒子会被内容撑大*/
                        /* 把盒子的高撑开，
                           和width设置同样的固定的宽度或者百分比，
                           百分比相对的是父元素盒子的宽度 */
                        padding-bottom: 20%;
                        background: pink;
                        color: #666;
                }

2.padding-top

*{
        margin: 0;
        padding: 0;
}
.box{
        width: 20%;
        /* 设置height为0 ，避免盒子被内容撑开多余的高度 */
        height: 0px;
        /* 把盒子的高撑开，
           和width设置同样的固定的宽度或者百分比 ，
           百分比相对的是父元素盒子的宽度 */
        padding-bottom: 20%;
        background: pink;
        color: #666;
        position: relative;
        overflow: hidden;
}
p{
        position: absolute; 
        /*盒子设置了heigh:0px；导致该元素里面再有子元素的时候，就无法正常设置高度。
         所以我们需要用到position: absolute;
         使当前内容脱离文档流,那么内容的高度百分比参照的就是父级的宽度*/
        width: 100%;
        height: 100%;
        background: yellow;
}

3.css3 vw单位，vw是相对于视口的宽度。视口被均分为100单位的vw。1vw = 1% viewport width

.box{
                width: 20%;//width:20vw也可以
                height: 20vw;
                background: pink;
        }