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

CSS 笔记——Flexbox（弹性盒布局）

news 来源：原创 2025/9/19 8:55:18

目录

1. Flex 容器与 Flex 项目

2. 主轴与交叉轴

3. Flex 容器的属性

display

flex-direction

justify-content

align-items

align-content

flex-wrap

4. Flex 项目的属性

flex-grow

flex-shrink

flex-basis

flex

align-self

5. Flexbox 的优点

6. Flexbox 的应用场景

示例代码

总结

        CSS Flexbox（弹性盒布局）是一种强大的布局模型，用于创建灵活且响应式的用户界面。以下是对 Flexbox 布局中主要知识点的详细介绍：

1. Flex 容器与 Flex 项目

  • Flex 容器：通过设置 display: flex; 或 display: inline-flex;，将一个元素变成 Flex 容器。

  • Flex 项目：Flex 容器的直接子元素称为 Flex 项目。

       直接子元素是指那些直接嵌套在某个元素内部的元素，而不包括嵌套在中间的其他元素内的元素。

代码示例 

<div class="container"> <!-- Flex 容器 --><div class="item"></div> <!-- Flex 项目 --><div class="item"></div><div class="item"></div>
</div>

2. 主轴与交叉轴

  • 主轴（Main Axis）：Flex 容器的主要方向，默认是水平方向。

  • 交叉轴（Cross Axis）：与主轴垂直的方向，默认是垂直方向。

3. Flex 容器的属性

以下是 Flex 容器可以设置的属性：

display

  • 值：flex 或 inline-flex

  • 作用：将容器设置为 Flexbox 布局。

.container {display: flex; /* 或 inline-flex */
}
flex-direction

  • 作用：定义主轴的方向。

  • 常见值：

    • row：主轴为水平方向（默认值）。

    • row-reverse：主轴为水平方向，但反向排列。

    • column：主轴为垂直方向。

    • column-reverse：主轴为垂直方向，但反向排列。

.container {flex-direction: row; /* 水平排列 */
}
justify-content

  • 作用：定义子元素在主轴上的对齐方式。

  • 常见值：

    • flex-start：子元素对齐主轴的起点。

    • flex-end：子元素对齐主轴的终点。

    • center：子元素在主轴上居中对齐。

    • space-between：子元素之间的间距相等，首尾元素分别对齐主轴的起点和终点。

    • space-around：子元素之间的间距相等，首尾元素与容器边缘的间距为其他间距的一半。

.container {justify-content: center; /* 主轴居中对齐 */
}
align-items

  • 作用：定义子元素在交叉轴上的对齐方式。

  • 常见值：

    • stretch：子元素在交叉轴上拉伸，填满整个容器（默认值）。

    • flex-start：子元素对齐交叉轴的起点。

    • flex-end：子元素对齐交叉轴的终点。

    • center：子元素在交叉轴上居中对齐。

    • baseline：子元素的基线对齐。

.container {align-items: center; /* 交叉轴居中对齐 */
}
align-content

  • 作用：定义多行子元素在交叉轴上的对齐方式（仅当子元素换行时有效）。

  • 常见值：

    • flex-start：子元素对齐交叉轴的起点。

    • flex-end：子元素对齐交叉轴的终点。

    • center：子元素在交叉轴上居中对齐。

    • space-between：子元素之间的间距相等。

    • space-around：子元素之间的间距相等，首尾元素与容器边缘的间距为其他间距的一半。

    • stretch：子元素在交叉轴上拉伸，填满整个容器。

.container {align-content: space-between; /* 多行子元素间距相等 */
}
flex-wrap

  • 作用：定义子元素是否可以换行。

  • 常见值：

    • nowrap：子元素不换行（默认值）。

    • wrap：子元素在必要时换行。

    • wrap-reverse：子元素在必要时换行，但反向排列。

.container {flex-wrap: wrap; /* 子元素可以换行 */
}

4. Flex 项目的属性

以下是 Flex 项目可以设置的属性：

flex-grow

  • 作用：定义子元素在主轴上的伸缩比例。

  • 值：数字，表示子元素可以占用的剩余空间比例。

.item {flex-grow: 1; /* 子元素可以占用所有剩余空间 */
}
flex-shrink

  • 作用：定义子元素在主轴上的收缩比例。

  • 值：数字，表示子元素在空间不足时的收缩比例。

.item {flex-shrink: 1; /* 子元素可以收缩 */
}
flex-basis

  • 作用：定义子元素在主轴上的初始大小。

  • 值：可以是具体的长度（如 100px）或 auto（默认值）。

.item {flex-basis: 100px; /* 子元素的初始宽度为 100px */
}
flex

  • 作用：flex-grow、flex-shrink 和 flex-basis 的简写形式。

  • 值：flex: <flex-grow> <flex-shrink> <flex-basis>;

  • 常用值：

    • flex: 1;：等同于 flex: 1 1 0;，表示子元素可以伸缩。

    • flex: auto;：等同于 flex: 1 1 auto;，表示子元素可以伸缩，初始大小为 auto。

    • flex: none;：等同于 flex: 0 0 auto;，表示子元素不可伸缩。

.item {flex: 1; /* 子元素可以伸缩 */
}
align-self

  • 作用：定义单个子元素在交叉轴上的对齐方式，覆盖 align-items 的设置。

  • 常见值：与 align-items 的值相同。

.item {align-self: center; /* 单个子元素在交叉轴上居中对齐 */
}

5. Flexbox 的优点

  1. 灵活性：Flexbox 可以轻松实现复杂的布局，如水平和垂直居中、等分空间等。

  2. 响应式：Flexbox 布局可以根据容器大小动态调整子元素的排列。

  3. 简单性：相比传统的布局方式（如浮动、定位），Flexbox 的代码更简洁，逻辑更清晰。

6. Flexbox 的应用场景

  • 水平和垂直居中：通过 justify-content: center; 和 align-items: center; 实现。

  • 等分空间：通过 flex: 1; 或 space-between 实现。

  • 响应式布局：通过 flex-wrap 和媒体查询实现。

  • 复杂布局：如导航栏、卡片布局、网格布局等。

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox 示例</title><style>.container {display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: 300px;height: 100px;background-color: #f0f0f0;border: 1px solid #ccc;}.item {width: 80px;height: 60px;background-color: #4285f4;color: white;display: flex;justify-content: center;align-items: center;flex-shrink: 0; /* 子元素不收缩 */}</style>
</head>
<body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>
</html>

总结

        Flexbox 是一种非常强大的布局工具，适合处理一维布局（水平或垂直）。通过灵活的属性设置，可以轻松实现复杂的布局需求。掌握 Flexbox 的核心概念和常用属性，可以在现代 Web 开发中事半功倍。

 

相关文章：

CSS 笔记——Flexbox（弹性盒布局）

目录 1. Flex 容器与 Flex 项目 2. 主轴与交叉轴 3. Flex 容器的属性 display flex-direction justify-content align-items align-content flex-wrap 4. Flex 项目的属性 flex-grow flex-shrink flex-basis flex align-self 5. Flexbox 的优点 6. Flexbox 的…...

编程日记 2025/9/19 8:55:18

Redis 缓存 + MySql 持久化 实现点赞服务

前言 为什么所用 redis 作为缓存来实现点赞服务, 而不是直接就使用 mysql 来完成? 使用 Redis 的集合数据结构来存储点赞用户的 ID&#xff0c;方便快速判断用户是否已点赞; 当用户频繁的点赞和取消点赞时, 无需操作数据库, 减轻服务器压力 Redis 可以承受高并发的读写操作…...

编程日记 2025/9/19 19:22:14

Oracle OCP知识点详解2：yum 等服务的搭建

一、YUM/DNF 服务架构解析 1.1 核心组件交互流程 sequenceDiagram participant Client participant YUM participant Repository participant RPMDBClient->>YUM: yum install oracle-database-preinstall YUM->>Repository: 获取元数据(repodata) Repository--&…...

编程日记 2025/9/19 19:16:49

JavaScript Hook XMLHttpRequest操作：逆向与调试实战指南

在JavaScript逆向工程中&#xff0c;Hook XMLHttpRequest操作是一种重要的技术&#xff0c;可以用来捕获、修改或分析网络请求的发送和接收过程。本文将结合具体案例&#xff0c;详细讲解如何实现XMLHttpRequest的Hook操作。 一、Hook XMLHttpRequest的基本原理 &#xff08;…...

编程日记 2025/9/19 19:20:37

21 天 Python 计划：MySQL视图、触发器、存储过程、函数与流程控制

文章目录 一、视图1.1 创建视图1.2 使用视图1.3 修改视图1.4 删除视图 二、触发器2.1 创建触发器2.2 使用触发器2.3 删除触发器 三、存储过程3.1 介绍3.2 创建简单存储过程&#xff08;无参&#xff09;3.3 创建存储过程&#xff08;有参&#xff09;3.4 执行存储过程3.5 删除存…...

编程日记 2025/9/19 16:30:57

机器学习 Day10 逻辑回归

1.简介 流程就是&#xff1a; 就是我们希望回归后激活函数给出的概率越是1和0. 2.API介绍 sklearn.linear_model.LogisticRegression 是 scikit-learn 库中用于实现逻辑回归算法的类&#xff0c;主要用于二分类或多分类问题。以下是对其重要参数的详细介绍&#xff1a; 2.1.…...

编程日记 2025/9/19 19:18:36

Hadoop的序列化和反序列化

//1 package com.example.sei;import org.apache.hadoop.io.Writable;import java.io.DataInput; import java.io.DataOutput; import java.io.IOException;//学生类&#xff0c;姓名&#xff0c;年龄 //支持hadoop的序列化 //1.要实现Writable接口 //2.补充一个空参构造 publi…...

编程日记 2025/9/18 19:02:08

Altera Cyclone EP1C20F400C8N FPGA 阿尔特拉 介绍

在可编程逻辑器件领域&#xff0c;Altera 的 Cyclone 系列 FPGA 以其低成本、低功耗和灵活的 I/O 支持而著称。EP1C20F400C8N 作为 Cyclone I 家族中规模最大的成员之一&#xff0c;提供约 20 060 个逻辑单元&#xff0c;面向通信、工业控制、视频处理等多种嵌入式应用场景。​…...

编程日记 2025/9/19 15:14:38

VTK随笔十四：QT与VTK的交互示例（平移）

VTK&#xff08;Visualization Toolkit&#xff09;是一个开源的软件系统&#xff0c;用于三维计算机图形学、图像处理和可视化。它提供了丰富的工具和类来处理三维数据和交互。在 VTK 中&#xff0c;拾取操作通常通过 vtkCellPicker 或 vtkPointPicker 等类来实现。 本文将展示…...

编程日记 2025/9/17 16:39:01

用户注册（阿里云手机验证码）

阿里云开通三网106短信 ①、在阿里云市场搜索“短信”&#xff0c;开通三网短信&#xff0c;并可以查看其中的请求示例&#xff08;java PHP^&#xff09; 并在个人中心的管理控制台中查到&#xff0c;获取其中的AppKey AppCode ②、接口开发 service-user模块中依赖spr…...

编程日记 2025/9/16 0:55:31

【BFT帝国】20250409更新PBFT总结

2411 2411 2411 Zhang G R, Pan F, Mao Y H, et al. Reaching Consensus in the Byzantine Empire: A Comprehensive Review of BFT Consensus Algorithms[J]. ACM COMPUTING SURVEYS, 2024,56(5).出版时间: MAY 2024 索引时间&#xff08;可被引用&#xff09;: 240412 被引:…...

编程日记 2025/9/19 9:21:21

学习海康VisionMaster之边缘交点

一&#xff1a;进一步学习了 今天学习下VisionMaster中的边缘交点&#xff0c;这个还是拟合直线的衍生应用&#xff0c;可以同时测量两条直线并且输出交点或者判定是否有交点 二&#xff1a;开始学习 1&#xff1a;什么是边缘交点&#xff1f; 按照传统的算法&#xff0c;必须…...

编程日记 2025/9/9 3:40:14

公司级项目-AD9914扫频源（三）评估板与上位机的初步调试

硬件平台搭建1-评估板与上位机 第一阶段&#xff0c;先使用评估板配套的上位机软件进行控制&#xff0c;学习一下各种功能的实现方式和寄存器配置方式。 硬件连接 需要的设备仪器包括&#xff1a;多路直流稳压电源、信号发生器、示波器、电脑。 按照图中的方式进行连接&am…...

编程日记 2025/9/19 12:39:38

技术优化实战解析：Stream重构与STAR法则应用指南

目录 一、真实案例背景&#xff1a;老代码的"历史厚重感" 二、屎山代码解剖课&#xff1a;这些写法到底烂在哪&#xff1f; 三、Stream流式重构&#xff1a;给老代码做个大保健 2.1 重构后代码实现 2.2 核心API技术拆解 2.3 进阶优化技巧 三、STAR法则技术文档…...

编程日记 2025/9/16 20:07:35

基于Qt的串口通信工具

程序介绍 该程序是一个基于Qt的串口通信工具&#xff0c;专用于ESP8266 WiFi模块的AT指令配置与调试。主要功能包括&#xff1a; 1. 核心功能 串口通信&#xff1a;支持串口开关、参数配置&#xff08;波特率、数据位、停止位、校验位&#xff09;及数据收发。 AT指令操作&a…...

编程日记 2025/9/14 20:47:37

Xilinx FPGA XCZU5EV‑2FBVB900I Zynq UltraScale+™ MPSoC EV 系列

XCZU5EV‑1FBVB900I XCZU5EV‑2FBVB900E XCZU5EV‑1FBVB900I 是 Xilinx Zynq UltraScale™ MPSoC EV 系列中功能最为丰富的器件之一&#xff0c;采用 16 nm FinFET 工艺&#xff0c;封装为 31 mm  31 mm、900‑ball FCBGA&#xff08;FBVB900&#xff09;。该系列在传统的…...

编程日记 2025/9/19 17:23:13

如何更改OCP与metadb集群的连接方式 —— OceanBase运维管理

背景 许多用户都会借助OCP平台来进行OceanBase集群的运维与监控&#xff0c;且因为考虑单节点的OCP部署&#xff0c;在遇故障时可能会短时间出现无法管控 OceanBase集群&#xff0c;多数用户倾向于采用多节点方式来部署OCP&#xff0c;即 OCP的 metadb集群也是三节点的集群部署…...

编程日记 2025/9/19 13:42:24

Databricks: Why did your cluster disappear?

You may found that you created a cluster many days ago, and you didnt delete it, but it is disapear. Why did this happen? Who deleted the cluster? Actually, 30 days after a compute is terminated, it is permanently deleted automaticlly. If your workspac…...

编程日记 2025/9/11 12:47:26

深入解析Java内存与缓存：从原理到实践优化

一、Java内存管理&#xff1a;JVM的核心机制 1. JVM内存模型全景图 ┌───────────────────────────────┐ │ JVM Memory │ ├─────────────┬─────────────────┤ │ Thread │ 共享…...

编程日记 2025/9/18 16:37:14

macos下 ragflow二次开发环境搭建

参考官网链接 https://ragflow.io/docs/dev/launch_ragflow_from_source虚拟环境 git clone https://github.com/infiniflow/ragflow.git cd ragflow/ # if not pipx, please install it at first pip3 install pipxpipx install uv uv sync --python 3.10 --all-extras 安装 …...

编程日记 2025/9/16 7:52:08

从 Excel 到你的表格应用：条件格式功能的嵌入实践指南

一、引言 在日常工作中&#xff0c;面对海量数据时&#xff0c;如何快速识别关键信息、发现数据趋势或异常值&#xff0c;是每个数据分析师面临的挑战。Excel的条件格式功能通过自动化的视觉标记&#xff0c;帮助用户轻松应对这一难题。 本文将详细介绍条件格式的应用场景&am…...

编程日记 2025/9/17 15:32:01

安徽京准：NTP网络时钟服务器功能及同步模式的介绍

安徽京准&#xff1a;NTP网络时钟服务器功能及同步模式的介绍 安徽京准&#xff1a;NTP网络时钟服务器功能及同步模式的介绍 1、NTP网络时钟服务器概念&#xff1a; NTP时钟服务器&#xff0c;表面意思是时间计量工具的服务设备&#xff0c;其在现代工业中是用于对客户端设备…...

编程日记 2025/9/17 21:50:17

基于ueditor编辑器的功能开发之百度编辑器自带的查找和替换功能无法对目标文字进行滚动定位修复

在查找百度编辑器的查找和替换功能&#xff0c;发现当页面文字过多&#xff0c;用户在检索文字点击上一个下一个的时候&#xff0c;滚动条不跟随滚动了 分析了ueditor关于searchpalce方法的处理时&#xff0c;他会在目标文字的前面插入一个span标签用户获取当前需要高亮的文字节…...

编程日记 2025/9/19 0:46:24

MYSQL——SQL语句到底怎么执行

查询语句执行流程 MySQL 查询语句执行流程 查询缓存&#xff08;Query Cache&#xff09; MySQL内部自带了一个缓存模块&#xff0c;默认是关闭的。主要是因为MySQL自带的缓存应用场景有限。 它要求SQL语句必须一摸一样表里面的任何一条数据发生变化时&#xff0c;该表所有缓…...

编程日记 2025/9/18 21:51:20

[蓝桥杯 2022 省 B] 李白打酒加强版

题目链接&#xff1a; 思路&#xff1a; ①定义dp数组&#xff0c;f[i][j][k]&#xff0c;表示经过 i 店&#xff0c; 遇到 j 花&#xff0c; 还有 k 酒。如果酒的数量超过了花的数量&#xff0c;那么一定喝不完。因此&#xff0c;k 不能超过 M。 ②从店推过来&#xff0c;f[…...

编程日记 2025/9/17 23:02:48

计算机视觉——图像金字塔与目标图像边缘检测原理与实践

一、两个图像块之间的相似性或距离度量 1.1 平方差和&#xff08;SSD&#xff09; 平方差和&#xff08;SSD&#xff09; 是一种常用的图像相似性度量方法。它通过计算两个图像在每个对应位置的像素值差的平方和来衡量两个图像之间的整体差异。如果两个图像在每个位置的像素值…...

编程日记 2025/9/18 7:00:30

复现QGIS-MCP教程

由于Claude国内下载不了尝试使用Cursor 下载安装Cursor Cursor - The AI Code Editor 本示例安装的是0.46版本 UV安装 简介 安装 安装成功 配置环境变量 验证 下载代码 git clone gitgithub.com:jjsantos01/qgis_mcp.git QGIS插件安装 文件拷贝 您需要将 qgis_mcp_plu…...

编程日记 2025/9/17 22:23:53

人工智能图像识别Spark Core

Spark Core 一.spark运行架构 1.运行架构 Spark 框架的核心是一个计算引擎&#xff0c;整体来说&#xff0c;它采用了标准 master-slave 的结构。 如下图所示&#xff0c;它展示了一个 Spark 执行时的基本结构。图形中的 Driver 表示 master&#xff0c;负责管理整个集群中的作…...

编程日记 2025/9/18 0:33:22

决策树+泰坦尼克号生存案例

决策树简介 学习目标 1.理解决策树算法的基本思想 2.知道构建决策树的步骤 【理解】决策树例子 决策树算法是一种监督学习算法&#xff0c;英文是Decision tree。 决策树思想的来源非常朴素&#xff0c;试想每个人的大脑都有类似于if-else这样的逻辑判断&#xff0c;这其中…...

编程日记 2025/9/11 10:43:35

怎么查看苹果手机和ipad的设备信息和ios udid

你知道吗&#xff1f;我们每天使用的iPhone和iPad&#xff0c;其实隐藏着大量详细的硬件与系统信息。除了常见的系统版本和序列号外&#xff0c;甚至连电池序列号、摄像头序列号、销售地区、芯片型号等信息&#xff0c;也都可以轻松查到&#xff01; 如果你是开发者、维修工程…...

编程日记 2025/9/10 20:37:26

智能驱动教育变革：人工智能在高中教育中的实践路径与创新策略

一、引言 随着信息技术的飞速发展&#xff0c;人工智能&#xff08;Artificial Intelligence, AI&#xff09;已成为推动社会进步的重要力量。在教育领域&#xff0c;人工智能的应用正逐渐改变着传统的教学模式和方法&#xff0c;为教育现代化注入了新的活力。高中教育作为教育…...

编程日记 2025/9/17 23:54:15

TCP 和 UDP 可以使用同一个端口吗？

TCP 和 UDP 可以使用同一个端口吗&#xff1f; 前言 在深入探讨 TCP 和 UDP 是否可以使用同一个端口之前&#xff0c;我们首先需要理解网络通信的基本原理。网络通信是一个复杂的过程&#xff0c;涉及到多个层次的协议和机制。在 OSI 模型中&#xff0c;传输层是负责端到端数…...

编程日记 2025/9/15 17:46:14

MySQL事务管理

MySQL事务管理 事务的概念 事务由一条或多条SQL语句组成&#xff0c;这些语句在逻辑上存在相关性&#xff0c;共同完成一个任务&#xff0c;事务主要用于处理操作量大&#xff0c;复杂度高的数据。比如转账就涉及多条SQL语句&#xff0c;包括查询余额&#xff08;select&…...

编程日记 2025/9/16 12:37:36

通过 SSH 方式访问 GitHub 仓库

我们来一步一步讲解如何让 Git 通过 SSH 方式访问 GitHub 仓库&#xff0c;包括从零开始的详细步骤&#xff0c;适用于大多数系统&#xff08;Linux、macOS、Windows Git Bash&#xff09;。 注意最好只用 Git bash 比较好&#xff01;他能够直接在 Windows 系统上面使用一些 L…...

编程日记 2025/9/18 20:24:12

数据库学习

DDL&#xff08;数据定义语言&#xff09;、DML&#xff08;数据操纵语言&#xff09;、DQL&#xff08;数据查询语言&#xff09;和DCL&#xff08;数据控制语言&#xff09;。 DDL用于创建、删除和修改数据库对象&#xff0c;如表和数据库&#xff1b;DML涉及数据的增删改操…...

编程日记 2025/9/12 20:38:31

DeepSeek在安全领域的应用案例全景解析

DeepSeek作为人工智能领域的标杆技术，已在网络安全、公共安全、工业安全、军事防护等领域形成系统性应用。以下从六大核心场景展开分析，结合技术实现与行业标杆案例，呈现其多维度的安全赋能价值。 一、网络安全防护体系创新 威胁检测与响应闭环安胜"星盾"平台：通…...

编程日记 2025/9/16 10:46:05

AI驱动SEO关键词精准定位

内容概要 在传统SEO实践中&#xff0c;关键词定位往往依赖人工经验与有限的数据样本&#xff0c;导致策略滞后性与覆盖盲区并存。随着AI技术的深度介入&#xff0c;这一过程正经历系统性重构&#xff1a;从搜索意图的智能识别到关键词的自动化挖掘&#xff0c;算法模型通过分析…...

编程日记 2025/9/15 21:12:55

邮件营销：如何巧妙平衡发送频率与客户体验

在邮件营销领域&#xff0c;发送频率和客户体验就像跷跷板的两端&#xff0c;需要精心平衡。如果邮件发得太多&#xff0c;客户可能会觉得烦&#xff0c;甚至取消订阅&#xff0c;对品牌产生不好的印象&#xff1b;但如果发得太少&#xff0c;客户又容易把你忘了&#xff0c;错…...

编程日记 2025/9/19 4:23:20

Acrel-1000DP分布式光伏监控系统在嘉兴亨泰新能源有限公司2996.37KWP分布式光伏项目中的应用

摘 要&#xff1a;分布式光伏发电系统其核心特点是发电设备靠近用电负荷中心&#xff0c;通常安装在屋顶、建筑立面或闲置空地上&#xff0c;截至2025年&#xff0c;分布式光伏发电系统在全球和中国范围内取得了显著发展&#xff0c;成为能源转型和可持续发展的重要推动力量。国…...

编程日记 2025/9/18 19:55:23

vue3中左右布局两个个组件使用vuedraggable实现左向右拖动，右组件列表可上下拖动

需求&#xff1a;左侧是个菜单组件&#xff0c;有对应的表单类型。 右侧是渲染组件&#xff0c;点击左侧菜单或者拖动即可渲染出对应的组件 项目中采用vuedraggable实现拖拽功能。 具体实现是使用elementplus的组件&#xff0c;然后根据tagName的类型去渲染不同的组件。 首先…...

编程日记 2025/9/18 19:05:51

gevent 高并发、 RabbitMQ 消息队列、Celery 分布式的案例和说明

1. gevent 高并发请求示例 gevent​​&#xff1a;基于协程的Python库&#xff0c;通过异步非阻塞模式实现高并发请求。例如&#xff0c;同时抓取100个网页时&#xff0c;无需等待每个请求完成&#xff0c;提升效率。 import gevent from gevent import monkey monkey.patch_…...

编程日记 2025/9/18 12:27:45

直线模组在电子行业具体的应用

在工业自动化高速发展的今天&#xff0c;直线模组作为重要的传动和控制元件&#xff0c;凭借其高效、精准、稳定的特性。在众多行业中得到了广泛应用&#xff0c;尤其是在电子行业中&#xff0c;通过提供精确的运动控制和定位&#xff0c;帮助提高电子制造过程的效率、质量和自…...

编程日记 2025/9/18 4:44:36

Ubuntu 24.04启用root账户

1.启用ubuntu中的root账号 ubuntu默认是禁用了root账号的,需要手动开始root权限 # 设置root账号密码 sudo passwd root # 用以下命令启用 root 账户&#xff1a; sudo usermod -aG sudo rootsu - root 然后输入你之前设置的 root 密码。 一旦你成功登录为 root 用户&#x…...

编程日记 2025/9/17 3:03:14

【ES系列】Elasticsearch简介：为什么需要它？（基础篇）

🔥 本文将详细介绍Elasticsearch的前世今生，以及为什么它在当今的技术栈中如此重要。本文是ES起飞之路系列的基础篇第一章，适合想要了解ES的读者。 文章目录 一、什么是Elasticsearch？1. ES的定义2. ES的核心特性2.1 分布式存储2.2 实时搜索2.3 高可用性2.4 RESTful API3.…...

编程日记 2025/9/17 23:18:25

SvelteKit 最新中文文档教程（19）—— 最佳实践之身份认证

前言 Svelte&#xff0c;一个语法简洁、入门容易&#xff0c;面向未来的前端框架。 从 Svelte 诞生之初&#xff0c;就备受开发者的喜爱&#xff0c;根据统计&#xff0c;从 2019 年到 2024 年&#xff0c;连续 6 年一直是开发者最感兴趣的前端框架 No.1&#xff1a; Svelte …...

编程日记 2025/9/19 15:12:55

Droris（强制）删除某一个分区数据

Doris如果想删除某一个分区的数据&#xff0c;可以这么操作&#xff1a; DROP PARTITION [IF EXISTS] partition_name [FORCE]需要注意的是&#xff1a; 必须为使用分区的表保留至少一个分区。执行DROP PARTITION一段时间后&#xff0c;可以通过RECOVER语句恢复被删除的分区:…...

编程日记 2025/9/17 18:32:20

Meta 最新 AI 模型系列 ——Llama 4

Meta 发布了最新 AI 模型系列 ——Llama 4&#xff0c;这是其 Llama 家族的最新成员。 在大模型竞技场&#xff08;Arena&#xff09;&#xff0c;Llama 4 Maverick 的总排名第二&#xff0c;成为第四个突破 1400 分的大模型。其中开放模型排名第一&#xff0c;超越了 DeepSeek…...

编程日记 2025/9/17 16:23:01

软考 系统架构设计师系列知识点 —— 设计模式之工厂模式

本文内容参考&#xff1a; 软考 系统架构设计师系列知识点之设计模式&#xff08;2&#xff09;_系统架构设计师中考设计模式吗-CSDN博客 https://baike.baidu.com/item/%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F?fromModulelemma_search-box 设计模式-工厂方法模式&#xff0…...

编程日记 2025/9/19 5:11:43

Jetpack Compose 状态保存机制全面解析：让UI状态持久化

在Android开发中&#xff0c;Jetpack Compose 的状态管理是一个核心话题&#xff0c;而状态保存则是确保良好用户体验的关键。本文将深入探讨Compose中各种状态保存技术&#xff0c;帮助你在配置变更和进程重建时保持UI状态。 一、基础保存&#xff1a;rememberSaveable reme…...

编程日记 2025/9/17 5:55:57

阿里云原生AI网关Higress：架构解析与应用实践

摘要 随着云原生与AI技术的深度融合&#xff0c;API网关作为流量治理的核心组件&#xff0c;正面临新的挑战与机遇。阿里云开源的Higress网关&#xff0c;凭借其“三网合一”&#xff08;流量网关、微服务网关、安全网关&#xff09;的高集成能力&#xff0c;以及面向AI场景的…...

编程日记 2025/9/15 7:04:22