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

相关推荐
雪芽蓝域zzs几秒前
第三节:目录结构重构(仿若依,优化层级,layout 与 components 同级)
前端·vue.js·重构
子非鱼a1 小时前
【WEB】[NewStarCTF 公开赛赛道]UnserializeOne
前端·javascript·html
南雨北斗1 小时前
Vue3 v-model中的自动事件绑定
前端
雪芽蓝域zzs2 小时前
第八节:Element Plus 基础、封装通用组件 + 路由守卫
前端·vue.js
码视野2 小时前
基于 Spring Boot + Vue3 的【智慧公厕微负压排风除臭与客流人感空间占用导引中台】设计与实现(含PRD/三端高保真源码/大屏)
前端·vue.js·人工智能·spring boot·后端
计算机魔术师3 小时前
刚赔了15亿又来被告?索尼华纳联手把Anthropic告上法庭
前端
笑霸final3 小时前
不用上传服务器!用 Vue3 + ONNX Runtime Web 在浏览器本地实现智能抠图
运维·前端·图像处理·ai·onnx·canva可画·web性能优化
月月大王的3D日记3 小时前
Three.js 入门系列(9):从零搭一座“闹鬼小屋”
前端·javascript
TingTing3 小时前
Vue3动态组件库建设
前端
码上暴富4 小时前
Cursor / VS Code 自定义文件颜色
前端·vscode