正方形那地方不是很理解呀
来源：4-3 热卖推荐--结构和样式
qq_火柴_eP0246
2019-08-03 15:21:34
为什么要写个正方形，
写回答
1回答
-
这里写成正方形是因为图片是正方形的哦，使用width：100%和padding-top:100%实现正方形是为了保证在不同的设备上，都是按照正方形显示，不变形。原理是：
在 CSS 盒模型中，按照规定margin, padding 的百分比数值是相对父元素宽度 的宽度计算的。由此只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了，因为这里实际上是使用padding-top撑开盒子的高度，而padding-top是根据父元素的width进行计算的，所以父元素的width变化成多少，padding-top也会等比例的进行变化，这样，实际上也就是保证了width和padding-top撑开的高度始终等比例缩放，也就是会形成正方形了
希望可以帮到你，如果未能解决你的疑惑，可以再次提问哦
祝学习愉快！
1
相似问题