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

相关推荐
喜欢踢足球的老罗3 分钟前
产品方案:从已有 CRM AI 系统切入 WhatsApp Chrome 插件赛道
前端·人工智能·chrome
无心使然4 分钟前
OpenLayers 10.9.0 渲染架构分析
前端·gis·数据可视化
智能制造产品经理代码提升5 分钟前
ES6+ 标准使用手册
前端·javascript·es6
xiaofeichaichai10 分钟前
ES6+ 模块
前端·ecmascript·es6
xuankuxiaoyao12 分钟前
阶段案例——后台管理系统
java·linux·前端
恋猫de小郭12 分钟前
Android 17 内存管理将严格管控,App 要注意适配
android·前端·flutter
暗冰ཏོ16 分钟前
《uni-app 跨端开发完整指南:从基础入门到 H5、小程序、App 发布上线》
前端·小程序·uni-app·vue·html5
搬砖的前端19 分钟前
AI工具集:Git提交时使用AI进行CodeReview如何在前端应用构建NPM包
前端·人工智能·git·npm·codeview
Bigger30 分钟前
mini-cc 终端 UI:用 React 写 CLI 是什么体验
前端·react.js·ai编程
在水一缸37 分钟前
警惕供应链陷阱:从 Red Hat npm 恶意包事件看依赖安全防护
前端·安全·npm·供应链安全·red hat·恶意包·依赖安全