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

相关推荐
Mr Xu_6 分钟前
从后端数据到前端图表:深入解析 reduce 与 flatMap 的数据整形实战
前端·javascript
玖玖passion24 分钟前
Windows 上部署 Hermes Agent 完整指南 - 让你的 AI 助手在 WSL2 中跑起来
前端·后端·github
AC赳赳老秦1 小时前
OpenClaw多平台部署:Windows+Linux跨系统协同,实现全场景覆盖
linux·服务器·前端·网络·windows·deepseek·openclaw
喜欢吃鱿鱼2 小时前
DES加解密(附带解决转义问题)-VUE
开发语言·前端·javascript
腹黑天蝎座2 小时前
前端性能优化实战指南:从原理到落地的全方位解决方案
前端·性能优化·监控
忆往wu前2 小时前
一文通透 Vue动态组件体系:插槽|数据监听|组件通信|动态切换|缓存—闭环
前端·面试
奇奇怪怪的问题2 小时前
问题总结:关于封装axios问题,导致外部使用接口报错,无法进入error回调
前端·axios
Jenlybein2 小时前
速学 VS Code 插件开发入门,客制化你的开发体验
前端·javascript·visual studio code
qq_437100662 小时前
SSE 流式响应(Server-Sent Events)
前端·sse