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

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

news 2025/7/4 10:18:54

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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/7/1 13:03:01

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/7/2 15:20:59

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/7/4 10:07:15

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/6/27 20:32:42

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/6/16 13:40:18

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/6/17 5:18:28

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/6/16 16:17:22

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/7/4 1:28:58

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2025/7/2 13:38:37

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/7/2 22:36:00