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 分钟前
RN与Flutter架构区别
前端·flutter·react native·react.js·架构·node.js
peter676810 分钟前
css学习小结
前端·css·学习
liangshanbo121511 分钟前
什么是CSS原子化?它的优劣势是什么?
前端·css·tensorflow·css原子化
.道阻且长.13 分钟前
C++ 11:可变参数模板
前端·c++·算法
IMPYLH17 分钟前
HTML 的 <th> 元素
前端·html
风骏时光牛马18 分钟前
AI浪潮下程序员的职场破局与能力成长思考
前端
IMPYLH24 分钟前
HTML 的 <thead> 元素
前端·html
FungLeo9 小时前
成为全栈·React 管理后台篇·总复盘:从“接口能调通”到“后台值得使用”
前端·react.js·前端框架·项目复盘·成为全栈
Csvn10 小时前
并发模式:让渲染学会排队、插队和让路
前端
可乐鸡翅yeah_10 小时前
新手梳理:M3U8 线上问题,哪些是前端锅,哪些是后端锅
前端·ios·音视频·实时音视频·m3u8·音视频在线播放