本篇文章给大家带来的内容是关于CSS怎么实现自适应正方形？有代码吗，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>CSS实现自适应正方形</title><style>/*使用padding-bottom实现正方形*/ #test7{ width: 400px; background: gray; } .placeholder { width: 30%; padding-bottom: 30%;/* padding百分比相对父元素宽度计算,用padding去填充height*/ height: 0;/*避免被内容撑开多余的高度 */ background: #4acfff; } .vw { width: 10%; height: 10vw; background: pink; }</style></head><body><!-- 使用padding-bottom实现正方形 --><!-- padding百分比相对父元素宽度计算,用padding去填充height --><p id="test7"> <p class="placeholder">使用padding-bottom实现正方形</p></p><!-- 使用css3单位vw --><!-- 原理同padding，也是利用了vw是相对宽度，不过要注意是相对视窗宽度哦 --><p class="vw"></p></body></html>
