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 小时前
补充一个小知识点:有关@click.native
前端·vue.js
DJ斯特拉5 小时前
axios快速使用
开发语言·前端·javascript
还有多久拿退休金5 小时前
Ant Design Tree 搜索定位避坑指南:虚拟滚动下如何实现高亮与精准定位
前端·react.js
小月土星5 小时前
CSS 3D 从入门到炫技:手把手教你写一个旋转立方体
前端·css
xingpanvip5 小时前
星盘接口开发文档:本命盘接口指南
android·开发语言·css·php·lua
Hilaku5 小时前
AI 写代码越快,为什么 Code Review 越不能省?
前端·javascript·程序员
sugar__salt6 小时前
从网页小游戏到数据可视化:掌握 HTML5 Canvas 核心能力
前端·信息可视化·html5
北极星日淘6 小时前
前端 i18n 中日双语交互 + 翻译客服接口联动方案|日系海淘平台中文友好化开发实战
前端·交互
現実逃避と6 小时前
WIN10 Edge连续关闭多个标签页导致资源管理器崩溃临时解决办法
前端·edge
HjhIron6 小时前
CSS 3D 世界:从盒子模型到三维空间动画
javascript·css