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

相关推荐
liangshanbo121512 分钟前
Webpack的分包策略面试题
前端·webpack·node.js
ttwuai18 分钟前
Golang Web后台管理框架推荐:Gin、GoFrame与数据面板项目怎么分
前端·golang·gin
广州华水科技18 分钟前
北斗GNSS变形监测系统在水库安全监测中的应用与优势
前端
276695829237 分钟前
youdao/有道翻译APP 算法协议分析
开发语言·前端·python·sign·youdao·有道翻译app算法·有道app协议请求
奕鼎竜瑆9 小时前
Solid 前端响应式开发从零到精通
前端·人工智能
动恰客流统计9 小时前
景区客流统计怎么做?兼顾管控与运营的实施方案解析
大数据·前端·人工智能
派小心.10 小时前
A/B测试工具免费版够用吗?
前端·数据分析
前端snow10 小时前
ai agent --- redis 缓存
前端
duanshu_11 小时前
官网表单与下载异常怎么排查?五个环节定位故障
前端·自动化·flyweight