页面布局定位技巧

绝对定位

  • image.png

响应式正方形布局

image.png

  • 给红色盒子设置padding-top/padding-bottom为100%,会将盒子撑成正方形,会根据页面的大小进行改变
  • 再将绿色盒子绝对定位在红色盒子上面,可以达到伸缩保持正方形
    aofgm-u71cp.gif
posted @   story.Write(z)  阅读(5)  评论(0)  编辑  收藏  举报
相关博文：
· 响应式文字隐藏问题
· css 盒子模型
· 5.浮动布局与定位布局
· CSS-6 定位(position)
· 盒子垂直水平居中
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛