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

相关推荐
阿拉丁的梦1 天前
【C4D实用脚本】清除废点及删除了面的选择tag和材质tag及材质--AI编程
服务器·前端·材质
傅里叶1 天前
Flutter移动端获取相机内参
前端·flutter
哒哒哒5285201 天前
React useMemo 大白话用法文档(含注意项)
前端
xkxnq1 天前
第一阶段:Vue 基础入门(第 10 天)
前端·javascript·vue.js
智商偏低1 天前
abp PermissionDefinitionManager源码解析
开发语言·前端·javascript
RaidenLiu1 天前
Offstage / Visibility:不可见真的就不消耗性能吗
前端·flutter·性能优化
lgliuying1 天前
wangEditor5 富文本编辑器中使用 kityformula 公式编辑器的具体实践
前端·javascript·html
PBitW1 天前
Electron 脚本调用大坑!害惨我了
前端·electron
文心快码BaiduComate1 天前
我用文心快码开发了一款「积木工坊」:用AI让每个孩子都成为小小建筑师
前端·前端框架
掘金一周1 天前
高德地图与Three.js结合实现3D大屏可视化 | 掘金一周 1.8
前端·人工智能·后端