【CSS实现正方形】CSS实现自适应正方形、等宽高比矩形

自适应正方形就是在浏览器屏幕大小不一样或者采用小屏设备的时候，正方形要能够自适应的保持宽高比进行缩放，具体的实现有以下几种方式：

一、利用vw、vh、vmin、vmax

vw表示的是viewport的宽度，也就是视口的宽度，vh表示的是视口的高度，vmin=min{vw,vh}取的是两者中较小的值，vmax ={vw,vh}，1vm = 1% viewport width其他同理，所以利用上诉的单位来定义矩形的宽高即可实现等比变换。

div{
width :1vm;
height:1vm;
}

二、利用垂直方向上的padding值，当容器中的内容超过了容器的宽高时，容器的内容会扩充到padding中，同时padding，margin如果设置为百分比，则均是相对于父级元素的宽度而言的，所以即可以使用如下方式宽高1:1，同理可以设置其他的比例：

div{
height:0px;
width:100%;
padding-bottom/top:100%;
}

三、利用子元素将父元素撑起来，利用margin-top，但是要注意margin塌陷的问题

父元素：

.container{
overflow:hidden;//触发BFC解决margin问题
width:100%;
}
.container:after{
content:"";
margin-top:100%;
display:block; //块级元素才可以有垂直方向上的margin
}