技术栈

CSS那些厉害的布局方法

北杳同学2023-09-20 13:46

1.超级居中(水平和垂直都居中)

只需要给外层父级元素加上下面代码

复制代码
.parent{
   display: grid;
   place-items: center;
}

2.经典的sidebar布局

复制代码
.parent{
    display: grid;
    grid-template-columns: minmax(150px,25%) 1fr;
}

3.固定的header和footer,中间的内容自适应

复制代码
.parent{
    display: grid;
    grid-template-rows:auto 1fr auto;
}

一些brankproint

上一篇:校园网免认证登录的方法-利用udp53端口
下一篇:每日一题:如何判断是否是数组,一个既简单又复杂的问题。(不要再用Object.prototype.toString.call、instance of判断了!!!)
相关推荐
是烟花哈
几秒前
【前端】React框架学习
前端·学习·react.js
qq435694701
1 小时前
JavaWeb08
前端
2401_87845453
2 小时前
html和css的复习(1)
前端·css·html
@PHARAOH
2 小时前
WHAT - git worktree 概念
前端·git
IT_陈寒
3 小时前
我竟然被JavaScript的隐式类型转换坑了三天!
前端·人工智能·后端
我亚索贼六丶
3 小时前
二十六. AI基础概念之如何更好的使用AI
前端
小码哥_常
3 小时前
安卓启动页Logo适配秘籍:告别“奇形怪状”的展示
前端
我亚索贼六丶
3 小时前
二十五.Electron 初体验与进阶
前端
当时只道寻常
3 小时前
像使用 Redis 一样操作 LocalStorage
前端·前端工程化
RONIN
3 小时前
UI组件库elementplus
前端
热门推荐
01GitHub 镜像站点02近期有什么ai的新消息,新动态? 2026.4月032026年4月AI大事件深度解读:大模型竞争进入“深水区“042026年AI前瞻:量子AI、具身智能与科学发现的新纪元05在Windows 11上安装Docker的踩坑记录06codex app每次打开重连5次Reconnecting问题解决072026年4月技术前沿:AI大模型爆发、智能体革命与量子安全新纪元08Codex 接入 DeepSeek API 完整配置文档092026年AI编程工具终极横评:Cursor vs Claude Code vs Copilot10DeepSeek V4 全面解析:测评、对比、案例及实操指南