我
实现一个宽高自适应的正方形
难度：
- 第一种方式是利用 vw 来实现
css
.square {
width: 10%;
height: 10vw;
background: tomato;
}- 第二种方式是利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现
css
.square {
width: 20%;
height: 0;
padding-top: 20%;
background: orange;
}第三种方式是利用子元素的 margin-top 的值来实现的
css
.square {
width: 30%;
overflow: hidden;
background: yellow;
}
.square::after {
content: "";
display: block;
margin-top: 100%;
}