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

相关推荐
朦胧之1 分钟前
AI应用-消费流式输出
前端·javascript·ai编程
小林ixn2 分钟前
在浏览器跑通 15 亿参数大模型:我用 React + WebGPU 复刻了 DeepSeek-R1
前端·react.js·前端框架
Csvn28 分钟前
容器查询 @container 实战:告别无休止的媒体查询
前端
稚南城才子,乌衣巷风流3 小时前
函数:编程中的核心概念
开发语言·前端·javascript
IT_陈寒3 小时前
为什么我的JavaScript异步代码总是不按顺序执行?
前端·人工智能·后端
索西引擎4 小时前
【React】useState 状态更新机制:批量更新策略与“异步“错觉的深层解析
前端·react.js·前端框架
慢功夫4 小时前
💡第五篇:VSCode插件是如何与主进程通信的?
前端·visual studio code
锋行天下4 小时前
打造企业内部知识库系统RAG全栈项目
前端·后端·架构
竹林8184 小时前
用 ethers.js 连接 MetaMask 实现钱包登录:一个真实项目中的完整踩坑记录
前端·javascript
虚惊一场5 小时前
在浏览器里跑 Prettier:格式化 Markdown 的四个难点
前端·javascript·vue.js