实现一个自适应内容的正方形盒子

[Chocolate1999]

[HearLing]

1.使用 CSS3 vw 单位，vw是相对于视口的宽度。

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

2.设置盒子的padding-bottom和盒子的宽度一样，同时设置heigh = 0px；

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

}