当前位置： 首页 > news >正文

CSS学习（Grid布局和flex布局比较）

news 2026/4/6 6:26:07

grid网格布局真香，比flex方便太多了，grid-template-columns用法

文章目录

    • flex布局的时候
    • 网格grid布局的时候
      • 可以修改某一列的像素
      • 可以修改某一列的宽度占比
      • 自适应屏幕分列
      • 让第一个元素长宽都占2个

flex布局的时候

在这里插入图片描述
最后一行不够4个的时候 最下面一行无法对齐
在这里插入图片描述

网格grid布局的时候

在这里插入图片描述

在这里插入图片描述
添加间隔
在这里插入图片描述

在这里插入图片描述

可以修改某一列的像素

在这里插入图片描述

在这里插入图片描述

可以修改某一列的宽度占比

改成2fr 相当于占两份
在这里插入图片描述

在这里插入图片描述

写固定格式 前面是分几份 后面是每份的大小
在这里插入图片描述

在这里插入图片描述
因为不齐 还是使用自动填充 1fr比较好
在这里插入图片描述
在这里插入图片描述

自适应屏幕分列

使用自适应屏幕方法
auto-file 代表自适应 minmax(最小值，最大值)
在这里插入图片描述
记得修改宽度
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

让第一个元素长宽都占2个

只让第一个变大
在这里插入图片描述

占两行
grid-row : 1/3 1代表开始的列线是第一个 3代表结束的列线
在这里插入图片描述

在这里插入图片描述

占两列

在这里插入图片描述

在这里插入图片描述

相关文章：

CSS学习（Grid布局和flex布局比较）

grid网格布局真香，比flex方便太多了，grid-template-columns用法 文章目录 flex布局的时候网格grid布局的时候可以修改某一列的像素可以修改某一列的宽度占比自适应屏幕分列让第一个元素长宽都占2个 flex布局的时候 最后一行不够4个的时候 最下面一行无法…...

编程日记 2024/10/18 5:07:16

RTThread-Nano学习二-RT-Thread启动流程

一、简介 上一章，我们已经了解了如何通过MDK来移植RTT，不熟悉的可以看如下链接：RTThread-Nano学习一-基于MDK移植-CSDN博客本章我们就来继续了解一下，RTT的启动流程。 二、启动流程 官方给了一幅非常清晰的启动流程图&am…...

编程日记 2024/10/18 5:06:15

排查sshfs挂载失败的问题

#排查sshfs挂载失败的问题 写代码在Linux上运行，但是熟悉的IDE（比如VS code）在自己的电脑上，可以使用sshfs把linux上的目录挂载到本地，再用VScode打开即可，可以使用下面的命令： sshfs -odebug…...

编程日记 2024/10/18 5:05:13

【002】基于Spring Boot+Unipp的古诗词学习小程序【原创】

一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构：B/S架构 运行环境：win10/win11、jdk17 前端： 技术：框架Vue.js；UI库：ElementUI； 开发工具&…...

编程日记 2024/10/18 5:03:11

PageHelper循环依赖问题

1. 问题 2. 原因 项目中SpringBoot的版本为2.7.18。 SpringBoot2.6.x后不推荐使用循环依赖，也就是说从2.6.x版本开始，如果项目里还存在循环依赖，SpringBoot将拒绝启动！ 3. 解决 去pageHelper github看，才看到新版本…...

编程日记 2024/10/18 5:01:08

k8s部署Kafka集群超详细讲解

准备部署环境 Kubernetes集群信息 NAMEVERSIONk8s-masterv1.29.2k8s-node01v1.29.2k8s-node02v1.29.2 Kafka：3.7.1版本，apche版本 Zookeeper：3.6.3版本 准备StorageClass # kubectl get sc NAME PROVISIONER RECLA…...

编程日记 2024/10/18 5:00:07

【数据采集工具】Sqoop从入门到面试学习总结

国科大学习生活（期末复习资料、课程大作业解析、大厂实习经验心得等）: 文章专栏（点击跳转） 大数据开发学习文档（分布式文件系统的实现，大数据生态圈学习文档等）: 文章专栏（点击跳转&…...

编程日记 2024/10/18 4:59:06

Matlab绘图总结（进阶）

本文在前文的基础上进一步整理画图方法 MATLAB画动图_CSDN博客 1. 基础图形绘制 1.1 rectangle（矩形，圆形） 在前文中，讲解了如何使用rectangle，rectangle本意是用来画矩形的，其中，Curvature可…...

编程日记 2024/10/18 4:58:06

QExcel 保存数据 (QtXlsxWriter库 编译)

QtXlsxWriter 是一个用于在 Qt 应用程序中创建和操作 Excel XLSX 文件的库。它提供了一个简单的 API，使开发者能够轻松地生成和修改 Excel 文件，而无需依赖 Microsoft Excel 或其他外部应用程序。支持初始化、写文件、读文件、格式设置、合并单元格、加粗…...

编程日记 2024/10/18 4:57:05

k8s ETCD数据备份与恢复

在 Kubernetes 集群中，etcd 是一个分布式键值存储，它保存着整个集群的状态，包括节点、Pod、ConfigMap、Secrets 等关键信息。因此，定期对 etcd 进行备份是非常重要的，特别是在集群发生故障或需要恢复数据的情况下。本文…...

编程日记 2024/10/18 4:56:04

【C语言】循环嵌套：乘法表

循环嵌套&#xff0c;外层循环执行一次&#xff0c;内层循环执行i次。分别控制 在循环的过程中加一层循环。 多层循环属于循环嵌套、嵌套循环 #include <stdio.h> #include <math.h> /* 功能&#xff1a;循环嵌套 乘法表 时间&#xff1a;2024年10月 地点&#xf…...

编程日记 2024/10/18 4:55:03

基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)

详细视频演示 请联系我获取更详细的演示视频 项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不…...

编程日记 2024/10/18 4:54:02

从0开始深度学习（11）——多层感知机

前面介绍了线性神经网络&#xff0c;但是线性模型是有可能出错的&#xff0c;因为线性模型意味着是单调假设&#xff0c;但是现实中往往很复杂。例如&#xff0c;我们想要根据体温预测死亡率。 对体温高于37摄氏度的人来说&#xff0c;温度越高风险越大。 然而&#xff0c;对体…...

编程日记 2024/10/18 4:52:00

SQL语句查询

SQL语句查询 查询产生一个虚拟表 看到的是表形式显示的结果&#xff0c;但结果并不真正存储 每次执行查询只是从数据表中提取数据&#xff0c;并按照表的形式显示出来 查询语法 SELECT <列名> FROM <表名> [WHERE <查询条件表达式>] SELECT …...

编程日记 2024/10/18 4:51:00

OSI参考模型与TCP/IP模型

OSI参考模型 物理层 定义电压、接口、线缆标准、传输距离、传输介质等物理参数。数据链路层&#xff08;确定范围里的某一个&#xff09; MAC地址寻址网络层&#xff08;确定一个范围&#xff09; 网络地址层寻址、路由传输层&#xff08;区分不同的程序&#xff09; 数据分段…...

编程日记 2024/10/18 4:48:58

深度学习-26-基于PyTorch的多层感知机DNN

文章目录 1 代码分析1.1 加载数据集1.2 定义模型1.3 定义损失函数和优化器1.4 定义训练函数1.4.1 定义累加器Accumulator1.4.2 计算准确率accuracy1.4.3 评估函数evaluate_accuracy1.4.4 单轮训练函数train_epoch1.4.5 训练函数train1.2 执行训练2 整体代码3 参考附录1 代码分析…...

编程日记 2024/10/18 4:47:53

华为杯”第十三届中国研究生数学建模竞赛-B题：具有遗传性疾病和性状的遗传位点分析（附MATLAB代码实现）

目录 摘要： 1. 问题重述 1.1 问题背景 1.2 待解决问题 2. 符号说明 3. 问题一 3.1 问题分析 3.2 问题解决 4. 问题二 4.1 问题分析 4.2 问题解决 5. 问题三 5.1 问题分析 5.2 问题解决 6. 问题四 6.1 问题分析 6.2 问题解决 7. 总结 参考文献 代码实现 摘要： 人体的每条染色…...

编程日记 2024/10/18 4:46:51

滚雪球学Redis[8.2讲]：Redis的未来发展趋势：从云服务到AI与物联网的前沿探索

全文目录&#xff1a; &#x1f389;前言&#x1f504;Redis在云服务中的应用&#x1fa81;1. Redis作为云缓存服务&#x1fa84;示例&#xff1a;使用AWS ElastiCache Redis实例 &#x1f3ae;️2. 云原生应用中的持久化与高可用 ⚙️Redis 6.x及后续版本的新特性&#x1f579…...

编程日记 2024/10/18 4:44:50

针对考研的C语言学习（二叉树专题层次遍历---广度优先遍历）

层次便利需要一个队列来辅助保存节点信息 代码 #include<stdio.h> #include<stdlib.h> typedef char ElemType;//树 typedef struct trees{ElemType data;struct trees*lc;struct trees*rc; }treeNode,*Tree;//链表 typedef struct Links{Tree tree;struct Links…...

编程日记 2024/10/18 4:43:48

spring揭秘31-spring任务调度01-spring集成Quartz及JDKTimer定时器

文章目录 【README】【1】Quartz任务调度框架【1.1】Job调度任务【1.2】任务调度触发器Trigger【1.3】\*Quartz框架执行调度任务代码实践【1.3.1】硬编码执行Quartz调度任务【1.3.2】基于生产者模式执行quartz调度任务&#xff08;推荐&#xff09; 【2】spring集成Quartz【2.1…...

编程日记 2024/10/18 4:42:47

从零开始：在VS2019中用C++/CLI实现WinForm拖拽式界面设计

从零开始&#xff1a;在VS2019中用C/CLI实现WinForm拖拽式界面设计 当开发者需要在C项目中快速构建图形用户界面时&#xff0c;WinForm提供了一种比传统Win32 API更高效的解决方案。本文将详细介绍如何在Visual Studio 2019环境下&#xff0c;利用C/CLI技术实现类似C#的拖拽式W…...

编程新知 2026/4/6 5:28:17

【Butterfly库OpenHarmony实战使用教程】｜NAPI封装+Native C API调用+真机运行

&#x1f680;Butterfly库OpenHarmony实战使用教程&#xff5c;NAPI封装Native C API调用真机运行 大家好&#xff0c;我是InMainJhy&#xff0c;一名在上海读本科的大一学生&#x1f392;。本篇严格按照鸿蒙三方库征文要求创作&#xff0c;基于NAPI封装Native C API&#xff0…...

编程新知 2026/4/6 5:16:15

OpenClaw低成本方案：Qwen3-14B私有镜像替代OpenAI API实战

OpenClaw低成本方案&#xff1a;Qwen3-14B私有镜像替代OpenAI API实战 1. 为什么选择本地模型替代商用API 去年冬天&#xff0c;当我第一次用OpenClaw自动整理全年会议纪要时&#xff0c;看着账单里OpenAI API的消耗记录&#xff0c;手指悬在键盘上半天没敢点"重试"…...

编程新知 2026/4/6 5:04:05

剧本杀创作指南2025，解析，从零开始打造沉浸式推理体验

剧本杀创作指南2025&#xff0c;解析&#xff0c;从零开始打造沉浸式推理体验剧本杀作为一种新兴的娱乐方式&#xff0c;近年来在国内迅速崛起。随着市场需求的不断增长&#xff0c;越来越多的创作者开始尝试编写剧本杀剧本。本文将为你提供一份详尽的剧本杀创作指南&#xff0…...

编程新知 2026/4/6 4:16:39

OpenVINO benchmark_app 性能测试全攻略：从参数解析到FP32/INT8模型对比实战

OpenVINO benchmark_app 深度性能调优指南&#xff1a;参数解析与量化模型实战 在边缘计算和嵌入式设备上部署AI模型时&#xff0c;性能优化往往是决定项目成败的关键因素。Intel推出的OpenVINO工具套件中的benchmark_app&#xff0c;就像一位专业的"模型体检医生"&a…...

编程新知 2026/4/6 4:14:39

OpenClaw浏览器自动化：Qwen3-4B驱动网页检索与内容抓取

OpenClaw浏览器自动化&#xff1a;Qwen3-4B驱动网页检索与内容抓取 1. 为什么选择OpenClaw做浏览器自动化&#xff1f; 去年我接手了一个市场调研项目&#xff0c;需要从30多个行业网站抓取最新动态。最初尝试用Python写爬虫&#xff0c;但每个网站的页面结构差异太大&#x…...

编程新知 2026/4/6 4:01:51

gallery应用商店优化：提升本地AI平台的发现率与下载量

gallery应用商店优化&#xff1a;提升本地AI平台的发现率与下载量 【免费下载链接】gallery A gallery that showcases on-device ML/GenAI use cases and allows people to try and use models locally. 项目地址: https://gitcode.com/GitHub_Trending/gallery44/gallery …...

编程新知 2026/4/6 3:32:31

线性代数实战：特征值与二次型的核心应用解析

1. 特征值与特征向量的实战密码 第一次接触特征值和特征向量时&#xff0c;我也觉得这不过是数学课本里的抽象概念。直到在图像压缩项目中亲眼看到&#xff0c;用前20%的特征向量就能还原90%的图像信息&#xff0c;才真正理解它的威力。特征值分解就像给矩阵做X光&#xff0c;能…...

编程新知 2026/4/6 2:54:37

SegFormer实战：5分钟搞定ADE20K数据集上的语义分割（附完整代码）

SegFormer实战指南&#xff1a;ADE20K语义分割从零精解 在计算机视觉领域&#xff0c;语义分割技术正经历着前所未有的革新。ADE20K作为场景解析的标杆数据集&#xff0c;包含了150个精细标注的语义类别&#xff0c;成为检验算法实力的试金石。本文将带您深入SegFormer这一轻量…...

编程新知 2026/4/6 1:54:08

深入解析Anaconda中的pkgs文件夹：功能、管理与优化策略

1. pkgs文件夹的核心功能解析 第一次打开Anaconda安装目录时&#xff0c;很多人都会被那个占据几个GB空间的pkgs文件夹吓一跳。这个看似普通的文件夹&#xff0c;其实是Anaconda生态系统的"心脏"。它不仅仅是存放安装包的仓库&#xff0c;更承担着环境管理的关键角色…...

编程新知 2026/4/6 1:43:51