css实现正方形div的3种方式

<div class="vw">hello,viewport</div>
.vw {
width: 50%;
height: 50vw;
background: #ccc;
}

<div class="placeholder"></div>
.placeholder {
width: 100%;
padding-bottom: 100%;/* padding百分比相对父元素宽度计算 */
height: 0;//避免被内容撑开多余的高度
}

<div class="square">
<div class="content">
Hello!
</div>
</div>
.square {
width: 50%;
background: #ccc;
}

.square:after {
content: "";
display: block;
padding-bottom: 100%;
}

.content {
position: absolute;
width: 100%;
height: 100%;
}