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

<div class="demo">viewport</div><style>.demo{ ????????width: 20%; ????????height: 20vw; ????????background: #ccc; ??????}</style>

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

<div class="demo3"></div> ???.demo3{ ???????????width: 30%; ???????????background: #ccc; ???????????position: relative; ???????} ???????.demo3:before { ???????????content: ""; ???????????display: block; ???????????padding-bottom: 100%; ???????} ???????.demo3:after{ ???????????content: "viewport"; ???????????position: absolute; ???????????top: 50%; ???????????left: 0; ???????????width: 100%; ???????????height: 50%; ???????????text-align: center; ???????????display: block; ???????}