CSS那些厉害的布局方法

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

相关推荐
天外来物27 分钟前
element-plus主题配置及动态切换主题
前端·css·element
晴殇i1 小时前
这个前端工具杀疯了!发布一周狂揽 10k Star,Snapchat 开源框架重新定义跨平台
前端·程序员
孟祥_成都1 小时前
打包票!前端和小白一定明白的人工智能基础概念!
前端·人工智能
小满zs2 小时前
Next.js第六章(平行路由)
前端
小满zs2 小时前
Next.js第七章(路由组)
前端
Mountain and sea2 小时前
发那科机器人指令详解:从入门到精通
前端·机器人
泯泷2 小时前
Tiptap 深度教程(四):终极定制 - 从零创建你的专属扩展
前端·javascript·架构
局i2 小时前
vue简介
前端·javascript·vue.js
yqcoder2 小时前
vue2 和 vue3 中,列表中的 key 值作用
前端·javascript·vue.js
U***49833 小时前
前端TypeScript教程汇总,从基础到高级
前端·javascript·typescript