技术栈

CSS那些厉害的布局方法

北杳同学2023-09-20 13:46

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

上一篇:校园网免认证登录的方法-利用udp53端口
下一篇:每日一题:如何判断是否是数组,一个既简单又复杂的问题。(不要再用Object.prototype.toString.call、instance of判断了!!!)
相关推荐
华科易迅
4 分钟前
Vue如何集成封装Axios
前端·javascript·vue.js
康一夏
4 分钟前
Next.js 13变化有多大?
前端·react·nextjs
糖炒栗子0326
5 分钟前
前端项目标准环境搭建与启动
前端
不是az
6 分钟前
CSS知识点记录
前端·javascript·css
爱分享的阿Q
14 分钟前
GPT6-Spud-AGI前夜的豪赌
前端·easyui·agi
西西小飞龙
44 分钟前
Less/Sass Mixins vs. Extend
前端·less·sass
syjy2
1 小时前
(含下载)BeTheme WordPress主题使用教程
前端·wordpress·wordpress建站
Misnice
1 小时前
shadcn如何使用
前端·reactjs
h_jQuery
1 小时前
vue使用gm-crypto对数据进行sm4加密处理
前端·javascript·vue.js
阿赛工作室
2 小时前
Vue中onBeforeUnmount不触发的解决方案
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02一周AI热点速览(2026.03.31-04.06):GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决?3 种方案实测,附完整排查流程04AI 编程效率翻倍:Superpowers Skills 上手清单 + 完整指南05MySQL表约束详解:8大核心约束实战指南06Oh My Codex 快速使用指南07CodeBuddy与WorkBuddy深度对比:腾讯两款AI工具差异及实操指南08VMware Workstation Pro 17 虚拟机完整安装教程(2026最新)09实测!Gemma 4 成功跑在安卓手机上:离线 AI 助手终于来了10UV安装并设置国内源