页面布局定位技巧

绝对定位

  • image.png

响应式正方形布局

image.png

  • 给红色盒子设置padding-top/padding-bottom为100%,会将盒子撑成正方形,会根据页面的大小进行改变
  • 再将绿色盒子绝对定位在红色盒子上面,可以达到伸缩保持正方形
    aofgm-u71cp.gif
posted @ 2024-04-15 09:44  story.Write(z)  阅读(3)  评论(0)  编辑  收藏  举报