介绍 & lt; !doctype html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> CSS实现自适应正方形& lt;/title>
& lt; style>/*使用padding-bottom实现正方形*/# test7 {
宽度:400 px;
背景:灰色;
}
.placeholder {
宽度:30%;
padding-bottom: 30%;/*填充百分比相对父元素宽度计算,用填充去填充高*/高度:0;/*避免被内容撑开多余的高度*/背景:# 4 acfff;
}
.vw {
宽度:10%;
高度:10大众;
背景:粉色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; !——使用padding-bottom实现正方形——比;
& lt; !
填充百分比相对父元素宽度计算,用填充去填充高度
——比;
& lt; p id=皌est7"祝辞
类& lt; p=皃laceholder"祝辞使用padding-bottom实现正方形& lt;/p>
& lt;/p>
& lt; !——使用css3单位大众——比;
& lt; !
原理同填充,也是利用了大众是相对宽度,不过要注意是相对视窗宽度哦
——比;
类& lt; p=皏w"祝辞& lt;/p>
& lt;/body>
& lt;/html>
这篇文章给大家分享的是有关CSS实现自适应正方形的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
感谢各位的阅读!关于CSS实现自适应正方形的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
