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

CSS之flex布局

news 文章来源：https://blog.csdn.net/dachaoxuexi/article/details/136105105 2024/9/21 7:58:28

flex布局

CSS的Flex布局（Flexible Box Layout）是一种用于在页面上布置元素的高效方法，特别适合于响应式设计。Flex布局使得元素能够伸缩以适应可用空间，可以简化很多原本需要复杂CSS和HTML结构才能实现的布局设计。

flex布局包括flex容器和flex项

  • flex容器属性

    1.display: flex | inline-flex：启用flex布局。 flex作为块级弹性伸缩盒显示;inline-flex 作为内联块级弹性伸缩盒显示。
    2.flex-direction: row | row-reverse | column | column-reverse：决定主轴的方向。
    3.justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly：设置主轴上的对齐方式。
    4.align-items: stretch | flex-start | flex-end | center | baseline：设置交叉轴上的对齐方式。
    5.align-content: stretch | flex-start | flex-end | center | space-between | space-around：多行Flex项在交叉轴上的对齐方式（单行无效）。
    6.flex-wrap: nowrap | wrap | wrap-reverse：设置flex项是否可以换行。
    7.flex-flow：flex-direction 和 flex-wrap 的简写。

  • flex项属性
    1.flex-grow：定义flex项的放大比例。
    2.flex-shrink：定义flex项的缩小比例。
    3.flex-basis：定义flex项在分配多余空间之前的默认大小。
    4.flex：flex是flex-grow, flex-shrink和flex-basis的简写。
    5.align-self：允许单个flex项有与其他项不一样的对齐方式，覆盖align-items。

举个例子

代码示例

 <body><div class="flex-container"><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div></div></body><style>.flex-container {width: 600px;height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 100px;height: 100px;background-color: lightblue;}</style>

渲染示例：
在这里插入图片描述

易混淆属性总结

1.flex-grow

设置 flex 项主尺寸的 flex 增长系数，负值无效，默认为 0。flex-grow 分配剩余空间即 flex 容器的大小减去所有 flex 项的空间；

剩余空间 = 容器空间 - 所有flex项所占空间；

<body><div class="flex-container"><div class="flex-item item1"></div><div class="flex-item item2"></div><div class="flex-item item3"></div><div class="flex-item item4"></div></div></body><style>.flex-container {width: 600px;height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 100px;height: 100px;background-color: lightblue;}.item1 {flex-grow: 1;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}</style>

在这里插入图片描述
同理，有多个元素设置不同的flex-grow数值，则按照比例分配剩余空间。

2. flex-basis

指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

 .flex-item {flex-basis: 50px;height: 100px;background-color: lightblue;}.item1 {flex-basis: max-content;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

在这里插入图片描述

3. flex-shrink

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。负值不允许。默认值 1，在默认情况下flex项宽度加一块超出容器时，会等比例缩小。

.flex-item {width: 180px;height: 100px;background-color: lightblue;flex-shrink: 0;}.item1 {flex-shrink: 1;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

在这里插入图片描述
box1宽度 = 600 - 180 * 3 = 60；同理，有多个元素设置不同的flex-shrink数值，则按照比例分配空间。

4. flex:1 | 0 | auto | none

flex属性是flex-grow、flex-shrink、flex-basis三个属性的简写，默认值是flex: 0 1 auto。默认有剩余空间，不会自动放大；超出时会等比例缩小。

  • flex:1是flex-grow: 1;flex-shrink: 1;flex-basis: 0%;的缩写。flex-basis 0%表示0，无尺寸，以实际内容宽度为主，会覆盖设置的width。

  • flex:0是flex-grow: 0;flex-shrink: 1;flex-basis: 0%;的缩写。

  • flex:auto是flex-grow: 1;flex-shrink: 1;flex-basis: auto;的缩写。

  • flex:none是flex-grow: 0;flex-shrink: 0;flex-basis: auto;的缩写。

5. display: flex | inline-flex

inline-flex
代码示例

<body><div class="flex-container"><div class="flex-item item1">1</div><div class="flex-item item2">2</div><div class="flex-item item3">3</div><div class="flex-item item4">4</div></div></body><style>.flex-container {height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 180px;height: 100px;background-color: lightblue;}.item1 {background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

在这里插入图片描述
flex
代码

  display: flex;

在这里插入图片描述

相关文章：

CSS之flex布局

flex布局 CSS的Flex布局&#xff08;Flexible Box Layout&#xff09;是一种用于在页面上布置元素的高效方法&#xff0c;特别适合于响应式设计。Flex布局使得元素能够伸缩以适应可用空间&#xff0c;可以简化很多原本需要复杂CSS和HTML结构才能实现的布局设计。 flex布局包括…...

编程日记 2024/2/13 21:22:43

UnityShader——02三大主流编程语言

三大主流编程语言 Shader Language Shader language的发展方向是设计出在便携性方面可以与C/JAVA相比的高级语言&#xff0c;“赋予程序员灵活而方便的编程方式”&#xff0c;并“利用图形硬件的并行性&#xff0c;提高算法的效率” Shader language目前主要有 3 种语言&…...

编程日记 2024/2/13 21:21:42

Centos7安装nginx yum报错

Centos7安装nginx yum报错&#xff0c;yum源报错解决办法&#xff1a; 1、更新epel源后&#xff0c;出现yum报错 [roothacker117 ~]# yum install epel-release&#xff08;安装成功&#xff09; [roothacker117 ~]# yum install nginx&#xff08;安装失败&#xff0c;提示如…...

编程日记 2024/2/13 21:19:40

【机组】基于FPGA的32位算术逻辑运算单元的设计（EP2C5扩充选配类）

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《机组 | 模块单元实验》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 目录 一、实验目的 二、实验要求 …...

编程日记 2024/2/13 21:17:37

Asp .Net Core 系列：Asp .Net Core 集成 NLog

简介 NLog是一个基于.NET平台编写的日志记录类库&#xff0c;它可以在应用程序中添加跟踪调试代码&#xff0c;以便在开发、测试和生产环境中对程序进行监控和故障排除。NLog具有简单、灵活和易于配置的特点&#xff0c;支持在任何一种.NET语言中输出带有上下文的调试诊断信息…...

编程日记 2024/2/13 21:16:35

一个基于 .NET 7 + Vue.js 的前后端分离的通用后台管理系统框架 - DncZeus

前言 今天给大家推荐一个基于.NET 7 Vue.js(iview-admin) 的前后端分离的通用后台权限(页面访问、操作按钮控制)管理系统框架&#xff1a;DncZeus。 官方项目简介 DncZeus是一个基于 .NET 7 Vue.js 的前后端分离的通用后台管理系统框架。后端使用.NET 7 Entity Framework…...

编程日记 2024/2/13 21:15:32

更换商品图片日期JSON格式报错 - 序列化与反序列化日期格式设置

报错信息 msg: “服务端异常&#xff0c;请联系管理员JSON parse error: Cannot deserialize value of type java.util.Date from String “2023-11-13 13:13:35”: not a valid representation (error: Failed to parse Date value ‘2023-11-13 13:13:35’: Cannot parse da…...

编程日记 2024/2/13 21:11:28

FastJson、Jackson使用AOP切面进行日志打印异常

FastJson、Jackson使用AOP切面进行日志打印异常 一、概述 1、问题详情 使用FastJson、Jackson进行日志打印时分别包如下错误&#xff1a; 源码&#xff1a; //fastjon log.info("\nRequest Info :{} \n"&#xff0c; JSON.toJSONString(requestInfo)); //jackson …...

编程日记 2024/2/13 21:10:26

嵌入式大厂面试题（2）—— 富士康

从本篇开始将会更新历年来各个公司的面试题与面经&#xff0c;题目来自于网上各个平台以及博主自己遇到的&#xff0c;如果大家有所帮助&#xff0c;帮忙点点赞和关注吧&#xff01; 岗位&#xff1a;嵌入式软件工程师。 面试时间&#xff1a;30分钟。 岗位职责&#xff1a;官网…...

编程日记 2024/2/13 21:06:20

力扣_字符串4—编辑距离

题目 给你两个单词 w o r d 1 word1 word1 和 w o r d 2 word2 word2&#xff0c; 请返回将 w o r d 1 word1 word1 转换成 w o r d 2 word2 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符删除一个字符替换一个字符 方法—动…...

编程日记 2024/2/13 21:04:18

MySQL篇----第二十篇

系列文章目录 文章目录 系列文章目录前言一、NULL 是什么意思二、主键、外键和索引的区别？三、你可以用什么来确保表格里的字段只接受特定范围里的值?四、说说对 SQL 语句优化有哪些方法？（选择几条）前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍…...

编程日记 2024/2/13 21:00:13

Promise 基础

Promise 基础 理解 抽象表达&#xff1a; Promise 是一门新的技术&#xff08;ES6 规范&#xff09;Promise 是 Js 中进行异步编程的新的解决方案&#xff08;旧方案是使用回调函数&#xff09; 具体表达 从语法上来说&#xff0c;Promise 是一个构造函数从功能上来说&#x…...

编程日记 2024/2/13 20:57:10

RPA财务机器人之UiPath实战 - 自动化操作Excel进行财务数据汇总与分析之流程建立与数据读取、处理、汇总、分析

一、案例介绍&#xff1a; A公司共有13个开在不同银行的帐户&#xff0c;分别用于不同的业务分部或地区分部收付款。公司总部为了核算每月的收支情况&#xff0c;查看银行在哪个月交易量频繁&#xff0c;需要每月汇总各个银行的帐户借方和贷方金额&#xff0c;并将其净收支&am…...

编程日记 2024/2/13 20:53:07

华为机试真题实战应用【赛题代码篇】-输入整型数组和排序标识/根据排序标识flag给数组排序(附Java、C++和python代码)

目录 问题描述 输出描述： 示例： 代码实现 Java 代码2 代码3 python...

编程日记 2024/2/13 20:47:01

【算法随想录01】环形链表

题目&#xff1a;141. 环形链表 难度&#xff1a;EASY 代码 哈希表遍历求解&#xff0c;表中存储的是元素地址。 时间复杂度 O ( N ) O(N) O(N)&#xff0c;空间复杂度 O ( N ) O(N) O(N) /*** Definition for singly-linked list.* struct ListNode {* int val;* …...

编程日记 2024/2/13 20:46:01

macOS Sonoma 14.3.1（23D60）发布

系统介绍 黑果魏叔2 月 9 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 14.3.1 更新&#xff08;内部版本号&#xff1a;23D60&#xff09;&#xff0c;本次更新距离上次发布隔了 17 天。 魏叔 查询苹果官方更新日志&#xff0c;macOS Sonoma 14.3.1 修复内容和 …...

编程日记 2024/2/13 20:42:56

2024-02-11 叮当鸭-平台系统-第三次重构-目标确定

摘要: 对平台系统的第三个版本&#xff0c;做总体规划&#xff0c;明确要达到的目标&#xff0c;功能需求&#xff0c;性能需求。 根据这些所要达到的目标&#xff0c;确定选择何种的方案。方案的成本评估单独进行&#xff0c;本文重点分析要达到的各种目标。 功能需求: 能和…...

编程日记 2024/2/13 20:39:53

Android7.0-Fiddler证书问题

一、将Fiddler的证书导出到电脑&#xff0c;点击Tools -> Options -> HTTPS -> Actions -> Export Root Certificate to Desktop 二、下载Window版openssl&#xff0c; 点击这里打开页面&#xff0c;下拉到下面&#xff0c;选择最上面的64位EXE点击下载安装即可 安…...

编程日记 2024/2/13 20:38:52

Kotlin：单例模式(项目使用实例)

摘要 单例模式主要的五种如下&#xff1a; 饿汉式懒汉式线程安全的懒汉式双重校验锁式&#xff08;Double Check)静态内部类式 一、项目使用单例模式实例场景 app在运行时缓存部分数据&#xff0c;作为全局缓存数据&#xff0c;以便其他页面及时更新页面对应状态的数据&…...

编程日记 2024/2/13 20:26:10

vue百度地图的和element输入框/v-region的联动

vue百度地图的使用 第一步&#xff1a;安装插件第二步&#xff1a;main.js中引用第三步&#xff1a;页面中使用 第一步&#xff1a;安装插件 npm install vue-baidu-map --save第二步&#xff1a;main.js中引用 // 百度地图 import BaiduMap from vue-baidu-map Vue.use(Baid…...

编程日记 2024/2/13 20:22:06

搜索+哈希/平衡树，LeetCode 987. 二叉树的垂序遍历

目录 一、题目 1、题目描述 2、接口描述 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 给你二叉树的根结点 root &#xff0c;请你设计算法计算二叉树的 垂序遍历 序列。 对位于 (row, col) 的每个结点而言&#xff0c;其左右子结…...

编程日记 2024/2/13 20:21:05

蓝桥杯每日一题之内存问题

蓝桥杯真题---内存问题 题目描述&#xff1a; 小蓝最近总喜欢计算自己的代码中定义的变量占用了多少内存空间。 为了简化问题&#xff0c;变量的类型只有以下三种&#xff1a; int&#xff1a;整型变量&#xff0c;一个 int 型变量占用 4 Byte 的内存空间。 long&#xff…...

编程日记 2024/2/13 20:17:01

Django前后端分离之后端实践2

小实践&#xff1a;实现用户登录、注销及ORM管理功能、事务开启小实践 models.py class Books(models.Model):id models.CharField(primary_keyTrue,max_length20,verbose_name"图书ID")name models.CharField(max_length20,verbose_name图书名称)status models…...

编程日记 2024/2/13 20:14:59

windowsserver 2016 PostgreSQL9.6.3-2升级解决其安全漏洞问题

PostgreSQL 身份验证绕过漏洞(CVE-2017-7546) PostgreSQL 输入验证错误漏洞(CVE-2019-10211) PostgreSQL adminpack扩展安全漏洞(CVE-2018-1115) PostgreSQL 输入验证错误漏洞(CVE-2021-32027) PostgreSQL SQL注入漏洞(CVE-2019-10208) PostgreSQL 安全漏洞(CVE-2018-1058) …...

编程日记 2024/2/13 20:12:56

Java实现免税店商城管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.2 研究方法 三、系统展示四、核心代码4.1 查询免税种类4.2 查询物品档案4.3 新增顾客4.4 新增消费记录4.5 审核免税 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的免税店商城管理系…...

编程日记 2024/2/13 20:08:52

【Linux】信号

祝大家新年快乐啦&#xff01;&#xff01;&#xff01;新的一年&#xff0c;第一篇文章我们来谈谈Linux中的信号 目录 一、引入 二、系统内置的信号 三、前台进程和后台进程 四、signal函数 五、信号的产生 5.1 通过终端按键产生信号 5.2 调用系统函数向进程发信号 5…...

编程日记 2024/2/13 20:05:49

[NISACTF 2022]easyssrf

它提示我们输入 那我们输入file:///flag file:// 访问本地文件系统 它提醒我们输file:///fl4g 它提醒我们输ha1x1ux1u.php 看到代码stristr($file, “file”)当我们输入file它会提示我们输了 啥意思可以前面加个/ 也可以通过read读取 思路都是前面加/不等于flag绕过 filephp://…...

编程日记 2024/2/13 20:04:48

在Linux系统中设置全局HTTP代理的步骤与技巧

在Linux系统中&#xff0c;设置全局HTTP代理可以方便我们统一管理和控制网络请求。这不仅可以帮助我们加速网络访问&#xff0c;还可以在某些情况下绕过网络限制或实现匿名上网。下面&#xff0c;我将为你详细介绍在Linux系统中设置全局HTTP代理的步骤与技巧。 步骤一&#xf…...

编程日记 2024/2/13 20:03:47

即席查询框架怎么选？

怎么理解即席查询 即席查询&#xff08;Ad Hoc&#xff09;是用户根据自己的需求&#xff0c;灵活的选择查询条件&#xff0c;系统能够根据用户的选择生成相应的统计报表。即席查询与普通应用查询最大的不同是普通的应用查询是定制开发的&#xff0c;而即席查询是由用户自定义查…...

编程日记 2024/2/13 20:02:45

【C语言】实现双向链表

目录 &#xff08;一&#xff09;头文件 &#xff08;二&#xff09; 功能实现 &#xff08;1&#xff09;初始化 &#xff08;2&#xff09;打印链表 &#xff08;3&#xff09; 头插与头删 &#xff08;4&#xff09;尾插与尾删 &#xff08;5&#xff09;指定位置之后…...

编程日记 2024/2/13 20:01:44

Python操作MySQL基础

除了使用图形化工具以外&#xff0c;我们也可以使用编程语言来执行SQL从而操作数据库。在Python中&#xff0c;使用第三方库: pymysql来完成对MySQL数据库的操作。 安装第三方库pymysql 使用命令行,进入cmd&#xff0c;输入命令pip install pymysql. 创建到MySQL的数据库连接…...

编程日记 2024/2/13 20:00:43

【数学建模】【2024年】【第40届】【MCM/ICM】【E题 财产保险的可持续性】【解题思路】

一、题目 &#xff08;一&#xff09; 赛题原文 2024 ICM Problem E: Sustainability of Property Insurance Extreme-weather events are becoming a crisis for property owners and insurers. The world has endured “more than $1 trillion in damages from more than …...

编程日记 2024/2/13 19:53:37

SpringCloud--Eureka注册中心服务搭建注册以及服务发现

注意springboot以及springcloud版本&#xff0c;可能有莫名其妙的错误&#xff0c;这里使用的是springboot-2.6.13&#xff0c;springcloud-2021.0.5 一&#xff0c;Eureka-Server搭建&#xff1a; 1.创建项目&#xff1a;引入依赖 <dependency><groupId>org.sp…...

编程日记 2024/2/13 19:52:36

ansible shell模块 可以用来使用shell 命令 支持管道符 shell 模块和 command 模块的区别

这里写目录标题 说明shell模块用法shell 模块和 command 模块的区别 说明 shell模块可以在远程主机上调用shell解释器运行命令&#xff0c;支持shell的各种功能&#xff0c;例如管道等 shell模块用法 ansible slave -m shell -a cat /etc/passwd | grep root # 可以使用管道…...

编程日记 2024/2/13 19:51:33

qss的使用

参考&#xff1a;qss样式表笔记大全(二)&#xff1a;可设置样式的窗口部件列表&#xff08;上&#xff09;&#xff08;持续更新示例&#xff09;_51CTO博客_qss样式...

编程日记 2024/2/13 19:49:31

archlinux 使用 electron-ssr 代理 socks5

提前下载好 pacman 包 https://github.com/shadowsocksrr/electron-ssr/releases/download/v0.2.7/electron-ssr-0.2.7.pacman 首先要有 yay 和 aur 源&#xff0c;这个可以参考我之前的博客 虚拟机内使用 archinstall 安装 arch linux 2024.01.01 安装依赖 yay 安装的&#…...

编程日记 2024/2/13 19:47:16

macos安装local模式spark

文章目录 配置说明安装hadoop安装Spark测试安装成功 配置说明 Scala - 3.18 Spark - 3.5.0 Hadoop - 3.3.6 安装hadoop 从这里下载相应版本的hadoop下载后解压&#xff0c;配置系统环境变量 > sudo vim /etc/profile添加以下两行 export HADOOP_HOME/Users/collinsliu/…...

编程日记 2024/2/13 19:44:13

机器学习算法之支持向量机（SVM）

SVM恐怕大家即使不熟悉&#xff0c;也听说过这个大名吧&#xff0c;这一节我们就介绍这相爱相杀一段内容。 前言&#xff1a;在介绍一个新内容之SVM前&#xff0c;我们不觉映入眼帘的问题是为什么要引入SVM&#xff1f;吃的香&#xff0c;睡的着的情况下&#xff0c;肯定不会是…...

编程日记 2024/2/13 19:40:09

线性判别分析（LDA）

一、说明 LDA 是一种监督降维和分类技术。其主要目的是查找最能分隔数据集中两个或多个类的特征的线性组合。LDA 的主要目标是找到一个较低维度的子空间&#xff0c;该子空间可以最大限度地区分不同类别&#xff0c;同时保留与歧视相关的信息。 LDA 是受监督的&#xff0c;这意…...

编程日记 2024/2/13 19:38:07

Vue 前置导航

Vue 前置导航&#xff08;Vue Front Navigation&#xff09;是一种在 Vue.js 框架中实现导航功能的常见方式。它通常用于构建单页应用程序&#xff08;Single Page Application&#xff09;&#xff0c;通过在页面顶部或侧边栏显示导航菜单&#xff0c;使用户能够轻松切换到不同…...

编程日记 2024/2/13 19:37:06

串行通信，并行通信，波特率，全双工，半双工，单工等通信概念

串行通信&#xff1a; 只使用一根线来进行数据发送或者是接收&#xff0c;串行通信传输数据是一位一位进行传输 并行通信&#xff1a; 使用多跟线进行数据的发送和接收&#xff0c;并行通信可以一次传输多个数据位 波特率&#xff1a; 每秒传输数据的位数&#xff0c;决定…...

编程日记 2024/2/13 19:35:04

鸿蒙系统进一步学习（一）：学习资料总结，少走弯路

随着鸿蒙Next的计划越来越近&#xff0c;笔者之前的鸿蒙系统扫盲系列中&#xff0c;有很多朋友给我留言&#xff0c;不同的角度的问了一些问题&#xff0c;我明显感觉到一点&#xff0c;那就是许多人参与鸿蒙开发&#xff0c;但是又不知道从哪里下手&#xff0c;因为资料太多&a…...

编程日记 2024/2/13 19:33:02

异步复位同步释放原则

复位信号有一个非常重要的原则&#xff0c;叫作异步复位同步释放原则。异步复位指一个寄存器的复位信号随时可以复位&#xff0c;不必考虑该寄存器的时钟信号正处在哪个相位上。同步释放是指一个寄存器的复位信号从复位态回到释放态的时机&#xff0c;必须与该寄存器的时钟信号…...

编程日记 2024/2/13 19:32:01

M1 Mac使用SquareLine-Studio进行LVGL开发

背景 使用Gui-Guider开发遇到一些问题&#xff0c;比如组件不全。使用LVGL官方的设计软件开发 延续上一篇使用的基本环境。 LVGL项目 新建项目 选择Arduino的项目&#xff0c;设定好分辨率及颜色。 设计UI 导出代码 Export -> Create Template Project 导出文件如图…...

编程日记 2024/2/13 19:23:49

web3知识体系汇总

web3.0知识体系 1.行业发展 2. web3的特点&#xff1a; 1、统一身份认证系统 2、数据确权与授权 3、隐私保护与抗审查 4、去中心化运行 Web3.0思维技术思维✖金融思维✖社群思维✖产业思维”&#xff0c;才能从容理解未来Web3.0时代的大趋势。 3.技术栈 Web3.jsSolidit…...

编程日记 2024/2/13 19:21:47

服务器与电脑的区别?

目录 一、什么是服务器 二、什么是电脑 三、服务器和电脑的区别 一、什么是服务器 服务器是指一种专门提供计算和存储资源、运行特定软件服务的物理或虚拟计算机。服务器主要用于接受和处理来自客户端&#xff08;如个人电脑、手机等&#xff09;的请求&#xff0c;并向客户…...

编程日记 2024/2/13 19:11:37

结束 代码随想录 链表章节（下一张

环形链表II 首先&#xff0c;先判断有没有环&#xff0c;像物理相对速度一样 只要 相对速度为1 那么快指针绝对会在环里追上慢指针&#xff0c;最后x 和z 的距离其实最后两个index总会相遇&#xff0c;相遇的点就是入口 class Solution { public:ListNode *detectCycle(List…...

编程日记 2024/2/13 19:07:31

re:从0开始的CSS学习之路 6. 字体相关属性

1. 字体相关属性 font-size 字体大小 font-family 字体的系列&#xff08;字体簇&#xff09; 可以设置多个字体&#xff0c;每个字体之间以逗号隔开 设置多个字体的目的是为了用户尽可能的支持字体 网页字体的五大类&#xff1a; serif 衬线字体 sans-serif 非衬线字体 monos…...

编程日记 2024/2/13 19:05:27

FPGA（基于xilinx）中PCIe介绍以及IP核XDMA的使用

Xilinx中PCIe简介以及IP核XDMA的使用 例如&#xff1a;第一章 PCIe简介以及IP核的使用 文章目录 Xilinx中PCIe简介以及IP核XDMA的使用一、PCIe总线概述1.PCIe 总线架构2.PCIe 不同版本的性能指标及带宽计算3.PCIe 接口信号 二、XDMA1.XDMA 与其它 PCIe IP 的区别2.XDMA简介 三…...

编程日记 2024/2/13 18:59:20

docker 运行jar包 指定配置文件

要在Docker中运行JAR包并指定配置文件&#xff0c;你可以创建一个Dockerfile来定义你的容器环境&#xff0c;并在其中指定如何运行JAR包和配置文件。下面是一个简单的例子&#xff0c;展示了如何在Dockerfile中设置这些配置&#xff1a; 第一步&#xff1a;创建 Dockerfile文件…...

编程日记 2024/2/13 18:57:11