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

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

news 2025/9/13 22:52:23

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

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/9/8 2:34:58

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2025/8/26 18:48:34

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2025/9/8 17:59:06

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2025/9/10 3:34:26

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

编程新知 2025/9/4 16:30:43

MeshGPT 笔记

[2311.15475] MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers https://library.scholarcy.com/try 真正意义上的AI生成三维模型MESHGPT来袭&#xff01;_哔哩哔哩_bilibili GitHub - lucidrains/meshgpt-pytorch: Implementation of MeshGPT, SOTA Me…...

编程新知 2025/9/13 0:08:41

spring boot使用HttpServletResponse实现sse后端流式输出消息

1.以前只是看过SSE的相关文章&#xff0c;没有具体实践&#xff0c;这次接入AI大模型使用到了流式输出&#xff0c;涉及到给前端流式返回&#xff0c;所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...

编程新知 2025/9/2 16:44:30

接口 RESTful 中的超媒体：REST 架构的灵魂驱动

在 RESTful 架构中&#xff0c;** 超媒体&#xff08;Hypermedia&#xff09;** 是一个核心概念&#xff0c;它体现了 REST 的 “表述性状态转移&#xff08;Representational State Transfer&#xff09;” 的本质&#xff0c;也是区分 “真 RESTful API” 与 “伪 RESTful AP…...

编程新知 2025/7/18 3:13:29

多模态大语言模型arxiv论文略读（110）

CoVLA: Comprehensive Vision-Language-Action Dataset for Autonomous Driving ➡️ 论文标题&#xff1a;CoVLA: Comprehensive Vision-Language-Action Dataset for Autonomous Driving ➡️ 论文作者&#xff1a;Hidehisa Arai, Keita Miwa, Kento Sasaki, Yu Yamaguchi, …...

编程新知 2025/9/11 9:23:13