用CSS实现自适应正方形
不多说，直接上代码，本文章一共例举了3种方案
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现自适应正方形</title> <style> /*使用padding-bottom实现正方形*/ .square1 { width: 10%; padding-bottom: 10%;/* padding百分比相对父元素宽度计算,用padding去填充height*/ height: 0;/*避免被内容撑开多余的高度 */ background: #4acfff; } .square2 { width: 10%; height: 10vw; background: pink; } .square3{ width: 10%; overflow: hidden; background: yellow; } .square3:after { content:''; display: block; margin-top: 100%; } </style> </head> <body> <!-- 使用padding-bottom实现正方形 --> <!-- padding百分比相对父元素宽度计算,用padding去填充height --> <div class="square1">使用padding-bottom实现正方形</div> <!-- 使用css3单位vw --> <!-- 原理同padding，也是利用了vw是相对宽度，不过要注意是相对视窗宽度哦--> <div class="square2">使用css3单位vw实现正方形</div> <!-- 使用伪类margin --> <div class="square3">使用伪类margin</div> </body> </html>
