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

相关推荐
不可能片场几秒前
工程实践 台账备份从全量复制改成增量日志
前端·electron
2603_965896622 分钟前
CSS BEM 命名规范|组件化样式分层权威指南
前端·javascript·css
进击的明明3 分钟前
前端开发中的 BEM 国际命名规范:让 CSS 不再"打架"
前端·css·html
deli0077 分钟前
中文在网址里为什么变成 E4B8AD?URL 编码 22 组用例实测
前端
羲云12 分钟前
MOSS-Image 开源后爆火:5B 生图模型真正值得关注的,是可控排版
前端
BreezeJiang21 分钟前
闭包和 useState 是两个知识点?你可能只学了半条作用域链
前端·面试
2601_9583529031 分钟前
一款模块通吃15类语音产品?AN-93如何实现录音笔、门禁、IPC的快速适配
前端·人工智能·嵌入式硬件·回声消除·降噪处理
子兮曰33 分钟前
Bun v1.4.4 实测:2,025 个文件,bun fmt 2.6 秒跑完
前端·后端·bun
Liudef0634 分钟前
用 DeepSeek Search API 做一个干净的单文件搜索页面(附完整源码)
前端·人工智能·工具·搜索·deepseek
忆挽篱笙歌1 小时前
进程替换函数与shenll命令行解释器
前端·javascript·算法