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

相关推荐
福兮说4 分钟前
URL 编码的七个坑:c++ 传到后端变空格、%25 套娃、截断 emoji 直接报错
开发语言·前端·javascript·node.js·url
吴声子夜歌9 分钟前
Nginx应用与运维——Nginx Web服务应用实战(Python网站的搭建)
运维·前端·nginx
小的时候可菜了27 分钟前
JS 异步的本质:从单线程到 thenable(一条进化链)
开发语言·前端·javascript
liangshanbo121533 分钟前
Webpack vs Vite 底层原理高频追问的问题
前端·webpack·node.js
web打印社区1 小时前
Windows 网页静默打印设置步骤:客户端、防火墙与联调清单
开发语言·前端·javascript·chrome·pdf·ecmascript
恋猫de小郭1 小时前
KMP 又改了编译流程, Separate Compilation 禁止了 `commonMain` 的依赖穿透
android·前端·flutter
吴声子夜歌1 小时前
Nginx应用与运维——Nginx Web服务应用实战(静态文件服务器的搭建)
运维·前端·nginx
y = xⁿ1 小时前
关于Agent工程落地
前端·人工智能·python
web打印社区2 小时前
JS 静默打印怎么做:纯前端为什么不行,以及最小可跑通写法
开发语言·前端·javascript·websocket·网络协议·http·pdf
web打印社区2 小时前
HTML5 静默打印:前端页面怎么调用打印机且尽量不弹窗
前端·javascript·vue.js·pdf·html·html5