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

相关推荐
BillKu3 小时前
TypeScript中,字符串字面量联合类型(Union Type)、enum的用法说明
前端·javascript·typescript
jayson.h3 小时前
PDF 合并+添加页码 相关库、类、函数
开发语言·前端·python
慧一居士4 小时前
Sass和Less功能、使用场景、用法对比
前端·css·less·sass
leoZ2314 小时前
AI+前端提效-09 AI赋能前端测试:单元测试、E2E测试自动生成,提升覆盖率
前端·人工智能·opencv·目标检测·数据挖掘·单元测试·语音识别
计算机魔术师4 小时前
OpenAI 评定 Astra 达到网络安全 Critical 能力阈值,将受限发布
前端
JavaGuide4 小时前
SpaceX 工程师的 AI Coding 玩法太牛了, 200 多个 Agent 并行!
前端·后端
小猪code4 小时前
frp 80/443 Web 服务两种部署模式实操笔记
前端·笔记
JamesZhang800784 小时前
Chrome相关知识点
前端
jayson.h5 小时前
python——pdf编辑
前端·python·pdf
顶级自由人5 小时前
本地正常、线上正常,为什么一个 Hook 仍会报错?
前端·javascript·程序员