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

相关推荐
kyriewen15 分钟前
重排、重绘、合成:浏览器渲染的“三兄弟”,你惹不起也躲不过
前端·javascript·浏览器
NickJiangDev19 分钟前
Elpis-Core 技术解析:从零构建一个基于 Koa 的企业级 Node.js 框架内核
前端
我要让全世界知道我很低调20 分钟前
来聊聊 Codex 高效编程的正确姿势
前端·程序员
NickJiangDev22 分钟前
Elpis Webpack 工程化实战:Vue 多页应用的构建体系搭建
前端
米饭同学i22 分钟前
GitLab CI/CD + Vue 前端 完整方案
前端
yuki_uix25 分钟前
遇到前端题目,我现在会先问自己这四个问题
前端·面试
Wect25 分钟前
JS 手撕:对象创建、继承全解析
前端·javascript·面试
PeterMap30 分钟前
Vue.js全面解析:从入门到上手,前端新手的首选框架
前端·vue.js
3秒一个大31 分钟前
深入理解 JS 中的栈与堆:从内存模型到数据结构,再谈内存泄漏
前端·javascript·数据结构
Mr_Xuhhh40 分钟前
深入Java多线程进阶:从锁策略到并发工具全解析
前端·数据库·python