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

前端取经路——入门取经:初出师门的九个CSS修行

大家好,我是老十三,一名前端开发工程师。CSS就像前端修行路上的第一道关卡,看似简单,实则暗藏玄机。在今天的文章中,我将带你一起应对九大CSS难题,从Flexbox布局到响应式设计,从选择器优先级到BEM命名法,一步步解锁CSS的奥秘。无论你是刚入行的小白,还是有经验的开发者,相信这些修行心法都能让你的CSS功力更上一层楼。

取经之路漫漫,初出师门的你是否已经准备好面对CSS的重重考验?在这前端西行的第一站,我将为你揭开CSS的九大修行难题,助你从"切图小白"蜕变为"样式大师"。

🔥 第一难:选择器权重战 - 如何用:is():where()破解特异性难题

问题:为什么有时候我写的CSS选择器不生效?这个"!important"到底该不该用?

深度技术:

CSS选择器权重(特异性)是前端修行的第一道门槛。当多个选择器指向同一元素时,浏览器会根据权重决定应用哪个规则。传统解决方案是堆砌选择器或滥用!important,但这会导致代码维护困难。

现代CSS提供了:is():where()这两个强大法宝:

  • :is()继承其内部最高权重选择器的权重
  • :where()的权重永远为0,不增加特异性

代码示例:

/* 传统写法:权重过高,难以覆盖 */
.sidebar nav ul li a.active { color: red; }/* 使用:is():简化代码但保留合理权重 */
:is(.sidebar, .footer) :is(nav, .menu) a.active { color: red; }/* 使用:where():零权重,便于后续覆盖 */
:where(.sidebar, .footer) a.active { color: red; }/* 覆盖:where()选择器,轻松实现 */
a.active { color: blue; }

💫 第二难:弹性布局 - Flexbox的七十二变

问题:居中对齐为何如此麻烦?Flexbox真的能一招解决所有布局问题吗?

深度技术:

Flexbox是一维布局模型,擅长处理行或列的元素排列。其核心在于父容器(flex container)和子元素(flex items)之间的关系。掌握flex-growflex-shrinkflex-basis三大属性的协同作用,才能真正领悟"七十二变"的奥秘。

特别是flex-basiswidth/height的微妙关系,以及各种简写形式(flex: 1等)背后的计算逻辑,更是让许多修行者困惑。

代码示例:

.flex-container {display: flex;/* 控制主轴方向 */flex-direction: row; /* 或column *//* 控制换行行为 */flex-wrap: wrap; /* 防止内容溢出 *//* 对齐方式 */justify-content: space-between; /* 主轴对齐 */align-items: center; /* 交叉轴对齐 */
}.flex-item {/* flex: grow shrink basis *//* 等分剩余空间,不缩小,基础尺寸为0 */flex: 1 0 0%; /* 不增长,不缩小,使用自身宽度 */flex: 0 0 auto; /* "金箍棒"模式:可增长,可缩小,初始为0 */flex: 1; /* 相当于 flex: 1 1 0% */
}

🌐 第三难:网格系统 - Grid布局的隐藏法术

问题:复杂的二维布局如何简化?Grid比Flexbox强在哪里?

深度技术:

CSS Grid是二维布局系统,擅长处理行与列的交错结构。其独特之处在于"网格线"和"网格区域"的概念,让复杂布局变得直观。

Grid真正的法力在于grid-template-areas,它允许你用ASCII艺术风格直观地定义布局,实现复杂的响应式设计。搭配minmax()auto-fillauto-fit等函数,更能写出灵活多变的布局。

代码示例:

.grid-container {display: grid;/* 定义列:3列布局,自动填充剩余空间 */grid-template-columns: 200px 1fr 2fr;/* 定义行:最小100px,自动适应内容 */grid-template-rows: minmax(100px, auto) repeat(2, 1fr);/* 使用区域模板定义布局 */grid-template-areas: "header header header""sidebar content content""footer footer footer";gap: 16px; /* 网格间距 */
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }/* 响应式布局的"腾云驾雾"法术 */
@media (max-width: 768px) {.grid-container {grid-template-areas: "header header""sidebar sidebar""content content""footer footer";grid-template-columns: 1fr 1fr;}
}

🌊 第四难:响应式设计 - 媒体查询的四大皆空

问题:手机、平板、电脑,一套代码如何适配所有设备?媒体查询真的是最佳方案吗?

深度技术:

响应式设计不仅关乎屏幕尺寸,更关乎用户体验。传统的断点式媒体查询(@media)虽然实用,但往往导致维护困难的"断点地狱"。

现代响应式设计应遵循"内容优先"原则,结合CSS新特性如container queries(容器查询)、clamp()函数和逻辑媒体特性,实现更加精确和灵活的自适应布局。

代码示例:

/* 基础样式:移动优先 */
.card {width: 100%;padding: 16px;
}/* 断点式媒体查询 */
@media (min-width: 768px) {.card {width: 50%;}
}/* 更现代的方法:流体排版 */
.responsive-text {/* 最小16px,最大24px,在600px-1200px屏幕上平滑缩放 */font-size: clamp(16px, 2vw + 10px, 24px);
}/* 逻辑媒体特性:适配暗模式和节电模式 */
@media (prefers-color-scheme: dark) {.card {background: #333;color: #fff;}
}/* 容器查询:基于父容器宽度而非视口 */
@container (min-width: 400px) {.card-content {display: grid;grid-template-columns: auto 1fr;}
}.card-container {/* 定义容器上下文 */container-type: inline-size;
}

🧪 第五难:CSS变量 - 打造可复用的"仙丹"

问题:如何避免CSS中的重复定义?如何构建真正可维护的样式系统?

深度技术:

CSS变量(自定义属性)是构建主题系统和可维护代码库的关键。与预处理器变量不同,CSS变量能在运行时动态修改,支持继承和作用域,并能与JavaScript交互。

构建变量系统时应遵循"分层设计",区分全局和局部变量,并使用命名空间避免冲突。特别是构建设计系统时,如何合理组织颜色、间距、动画等变量,更是决定可维护性的关键。

代码示例:

:root {/* 基础调色板 - 原子变量 */--color-primary-100: hsl(210, 100%, 90%);--color-primary-500: hsl(210, 100%, 50%);--color-primary-900: hsl(210, 100%, 10%);/* 语义变量 - 引用原子变量 */--color-background: var(--color-primary-100);--color-text: var(--color-primary-900);--color-button: var(--color-primary-500);/* 间距系统 */--spacing-unit: 8px;--spacing-xs: calc(var(--spacing-unit) * 0.5);--spacing-xl: calc(var(--spacing-unit) * 4);
}/* 组件作用域的变量 */
.card {--card-padding: var(--spacing-xl);--card-border-radius: 8px;padding: var(--card-padding);border-radius: var(--card-border-radius);background-color: var(--color-background);
}/* 主题切换:CSS变量的动态性 */
@media (prefers-color-scheme: dark) {:root {--color-background: var(--color-primary-900);--color-text: var(--color-primary-100);}
}

🔍 第六难:层叠上下文 - z-index失效之谜

问题:为什么给元素设置了较高的z-index,它却还是被其他元素遮挡?

深度技术:

层叠上下文(Stacking Context)是CSS中最容易被误解的概念之一。许多开发者误以为z-index是一个全局属性,实际上它只在同一层叠上下文中比较才有意义。

新建层叠上下文的方式有很多,除了常见的position + z-index组合外,opacitytransformfilter等属性也会创建新的层叠上下文。特别是在复杂组件嵌套时,理解层叠上下文的层级关系至关重要。

现代CSS中的isolation: isolate属性则提供了显式创建层叠上下文的能力,是解决z-index问题的有力工具。

代码示例:

/* 问题:弹窗被父级元素的兄弟元素遮挡 */
.parent {position: relative;z-index: 1;
}.popup {position: absolute;z-index: 999; /* 看似很高,但被限制在parent的层叠上下文中 */
}.sibling {position: relative;z-index: 2; /* 比parent高,所以会遮挡popup,尽管popup的z-index是999 */
}/* 解决方案1:调整层叠上下文层级 */
.parent {position: relative;z-index: 10; /* 提高父元素的z-index */
}/* 解决方案2:使用isolation创建新的层叠上下文 */
.popup-container {isolation: isolate; /* 创建新的层叠上下文,不影响其他样式 */
}.popup {position: absolute;z-index: 1; /* 在新的层叠上下文中,较小的值也能生效 */
}

⚡ 第七难:动画性能 - will-change的使用禁忌

问题:CSS动画为什么会导致页面卡顿?will-change真的是提升性能的灵丹妙药吗?

深度技术:

CSS动画性能优化是前端修行的重要课题。浏览器渲染管线中,某些属性的变化会触发昂贵的布局(layout)和绘制(paint)操作,而另一些属性则只影响合成(composite)阶段,性能更佳。

will-change属性告诉浏览器提前准备元素的变化,但过度使用反而会增加内存占用和初始渲染时间。正确使用transformopacity动画,搭配恰当的will-change策略,才能实现丝滑的60fps动画效果。

代码示例:

/* 低性能动画:触发布局和重绘 */
@keyframes bad-animation {from { width: 100px; height: 100px; }to { width: 200px; height: 200px; }
}/* 高性能动画:只触发合成 */
@keyframes good-animation {from { transform: scale(1); }to { transform: scale(2); }
}/* will-change的错误用法 */
.everything {will-change: transform, opacity, left, top, width, height; /* 过度使用 */
}/* will-change的正确用法 */
.card {transition: transform 0.3s;
}.card:hover {will-change: transform; /* 用户悬停时预先准备 */
}/* JavaScript辅助管理will-change */
/* 
document.querySelector('.animated').addEventListener('mouseenter', function() {this.style.willChange = 'transform';
});document.querySelector('.animated').addEventListener('animationend', function() {this.style.willChange = 'auto';
});
*/

🌀 第八难:视差滚动 - 纯CSS实现的"腾云驾雾"

问题:如何不依赖JavaScript,用纯CSS创建引人入胜的视差滚动效果?

深度技术:

视差滚动是一种通过让页面元素以不同速度移动来创造深度感的技术。传统实现通常依赖JavaScript,但现代CSS提供了多种纯CSS解决方案。

核心方法包括:使用background-attachment: fixed实现基础视差效果;利用perspectivetransform: translateZ()创建3D视差;以及最新的position: sticky结合CSS变量实现高级滚动效果。

代码示例:

/* 基础视差效果:背景固定 */
.parallax-basic {height: 100vh;background-image: url('mountains.jpg');background-attachment: fixed;background-position: center;background-size: cover;
}/* 3D视差效果:使用perspective */
.parallax-container {height: 100vh;overflow-y: scroll;perspective: 1px; /* 创建3D空间 */
}.parallax-layer-back {position: absolute;top: 0;right: 0;bottom: 0;left: 0;transform: translateZ(-1px) scale(2); /* 远层,移动慢 */
}.parallax-layer-front {position: relative;transform: translateZ(0); /* 近层,移动快 */z-index: 1;
}/* 现代视差:结合sticky定位和CSS变量 */
.sticky-parallax {--scroll-offset: 0; /* 由JavaScript更新 */position: sticky;top: 0;height: 100vh;transform: translate3d(0, calc(var(--scroll-offset) * -0.5), 0);
}/* 
// JavaScript部分,仅用于更新CSS变量
document.addEventListener('scroll', function() {const scrollTop = window.pageYOffset;document.documentElement.style.setProperty('--scroll-offset', scrollTop + 'px');
});
*/

🌓 第九难:暗黑模式 - 使用CSS变量的明暗转换术

问题:如何优雅地实现暗黑模式切换,而不是复制粘贴一套反色样式?

深度技术:

暗黑模式(Dark Mode)已成为现代UI的标配,但实现优雅的主题切换需要精心设计。关键在于建立一套基于CSS变量的主题系统,而不是简单地复制和反转颜色。

除了颜色转换,还需考虑对比度、阴影效果、图片处理和细微交互的适配。配合prefers-color-scheme媒体查询和JavaScript主题切换器,可实现完美的明暗转换体验。

代码示例:

/* 基础变量定义 */
:root {/* 明亮模式的基础变量 */--color-primary: #4361ee;--color-background: #ffffff;--color-surface: #f5f7fa;--color-text: #333333;--color-text-secondary: #666666;--shadow-strength: 0.1;--shadow-color: 0 0 0;
}/* 暗黑模式覆盖变量 */
@media (prefers-color-scheme: dark) {:root {--color-background: #121212;--color-surface: #1e1e1e;--color-text: #e0e0e0;--color-text-secondary: #a0a0a0;--shadow-strength: 0.2;--shadow-color: 220 40% 2%;}
}/* 支持手动切换主题的类 */
:root.dark-theme {--color-background: #121212;--color-surface: #1e1e1e;--color-text: #e0e0e0;--color-text-secondary: #a0a0a0;--shadow-strength: 0.2;--shadow-color: 220 40% 2%;
}/* 应用主题变量 */
body {background-color: var(--color-background);color: var(--color-text);transition: background-color 0.3s ease, color 0.3s ease;
}.card {background-color: var(--color-surface);box-shadow: 0 4px 6px hsl(var(--shadow-color) / var(--shadow-strength));
}/* 图片暗模式处理 */
@media (prefers-color-scheme: dark) {img:not([src*='.svg']) {filter: brightness(0.8) contrast(1.2); /* 调整非SVG图片 */}
}/* 响应暗模式的专用样式 */
.dark-theme-only {display: none;
}@media (prefers-color-scheme: dark) {.dark-theme-only {display: block;}.light-theme-only {display: none;}
}

取经感悟

初出师门的CSS修行之路,不仅是掌握技术的过程,更是一次思想的转变。从简单的样式编写,到构建可维护的样式系统,每一步都是修行之路上的重要里程碑。

记住,真正的CSS大师不是记住所有属性,而是懂得如何优雅地解决问题。理解原理,掌握核心概念,才能在千变万化的前端世界中游刃有余。

下一站,我们将踏入JavaScript的修炼场,领悟悟空的九大心法。

你在CSS修行路上遇到过哪些难题?欢迎在评论区分享你的取经故事!

相关文章:

前端取经路——入门取经:初出师门的九个CSS修行

大家好,我是老十三,一名前端开发工程师。CSS就像前端修行路上的第一道关卡,看似简单,实则暗藏玄机。在今天的文章中,我将带你一起应对九大CSS难题,从Flexbox布局到响应式设计,从选择器优先级到B…...

网络安全等级保护有关工作事项[2025]

公安部发布公网安〔2025〕1846号文件,关于对网络安全等级保护有关共工作事项的进一步说明 一、备案相关问题 1、如何执行系统备案动态更新工作? 全面梳理与重新填报: 答复:运营者需**全面梳理已备案系统**的情况,对于已完成定…...

柯西不等式应用题

第一种方法是作两个相似三角形ABC和CDE,求出AE长度为3。那么BD最大长度为3。 方法二:柯西不等式(a+b)(c+d)≥(ac+bd) (1√(5-2x&…...

聚焦多种检测场景,华大基因推出全流程本地化检测综合解决方案

“从毫米到微米,神秘的微观世界被发现;从微米到纳米,生命的本源被不断认知。”在时代背景及战略机遇的多重影响下,精准医学已成为新兴的发展趋势,对医学模式的发展具有重要的意义。一直以来,华大基因都致力…...

职场口语之名词从句

目录 一、主语从句 二、宾语从句 三、表语从句 四、同位语从句 一、主语从句 1. Who will win the game is uncertain. 谁将赢得这场比赛还不确定。 2. Why he was late isnt clear. 他为什么迟到还不清楚。 3. What we should do next is important. 我们接下来应该做什么…...

DVWA靶场保姆级通关教程--03CSRF跨站请求伪造

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 目录 文章目录 前言 一、low级别的源码分析 二、medium级别源码分析 安全性分析 增加了一层 Referer 验证: 关键点是:在真实的网络环境中&a…...

LangChain:大语言模型应用的“瑞士军刀”入门指南

LanChain入门指南 什么是LangChain?LangChain的核心价值1. 模块化设计 - AI界的"乐高积木"2. 典型应用场景 快速入门实战环境准备(5分钟)第一个示例:公司命名生成器(10分钟)进阶功能:…...

Mac电脑,idea突然文件都展示成了文本格式,导致ts,tsx文件都不能正常加载或提示异常,解决方案详细说明如下

有一天使用clean my mac软件清理电脑 突然发现idea出现了文件都以文本格式展示,如图所示 然后就卸载,计划重新安装,安装了好几个版本,并且setting->file types怎么设置都展示不对,考虑是否idea没卸载干净&#xff…...

如何将本地 Jar 包安装到 Maven 仓库(以 Aspose 为例)

在实际开发中,我们经常会遇到一些第三方库(如商业库 Aspose)无法通过 Maven 仓库直接引入的情况。这时,我们可以手动将 jar 包安装到本地 Maven 仓库,然后像普通依赖一样使用它。 本文以 Aspose.Slides 和 Aspose.Wor…...

[Linux]多线程(一)充分理解线程库

标题:[Linux]多线程 水墨不写bug 文章目录 一、线程的概念1、一句话总结区分进程和线程2、如何理解?3、那么进程和线程的对比?4、Linux为什么要这样设计进程和线程,难道不乱吗?5、从CPU的角度看待执行流?-…...

Mysql order by 用法

ORDER BY 是 SQL 里用于对查询结果进行排序的子句,它能够让查询结果按照指定的列或表达式进行升序或者降序排列,使数据呈现出更有规律的顺序,方便用户查看和分析。下面详细阐述其作用和用法 作用 ORDER BY 的主要作用是对查询结果集进行排序…...

嵌入式学习--江协51单片机day1

今天学习了led灯的相关操作以及独立按键对于led灯的控制。 led灯的相关操作 led灯的相关操作包括点亮,闪烁,流水灯以及流水灯plus 点亮 开发板的led灯是低电平有效,也就是当我们设置0时亮,1时灭。 P2是开发板的led灯模块的8位…...

uniapp开发11-v-for动态渲染list列表数据

uniapp开发11-v-for动态渲染list列表数据!下面是一个简单的动态渲染list列表数据的案例。我们现在还未对接真正的后台接口,所以我们直接在页面组件内部,返回一个json数组,模拟从服务器远程获取到的新闻列表信息。来达到渲染输出的…...

qt国际化翻译功能用法

文章目录 [toc]1 概述2 设置待翻译文本3 生成ts翻译源文件4 编辑ts翻译源文件5 生成qm翻译二进制文件6 加载qm翻译文件进行翻译 更多精彩内容👉内容导航 👈👉Qt开发经验 👈 1 概述 在 Qt 中,ts 文件和 qm 文件是用于国…...

nut-list和nut-swipe搭配:nut-cell侧滑定义无法冒泡打开及bug(含代码、案例、截图)

nut-list和nut-swipe搭配:nut-cell侧滑定义无法冒泡打开及bug(含代码、案例、截图) Nut-UI 官方文档: swipe侧滑手势: https://nutui.jd.com/h5/vue/4x/#/zh-CN/component/swipelist 虚拟列表: https://nutui.jd.com/h5/vue/4x/#/zh-CN/component/list疑问+bug+解决方式:…...

WebRTC并非万能:RTMP与RTSP的工程级价值再认识

不是所有低延迟场景都需要WebRTC:RTMP/RTSP的技术硬实力解析 ——来自大牛直播SDK的实战分析与底层技术对比 一、WebRTC是热潮,但不是银弹 近年来,WebRTC频频出现在技术选型会议上: “浏览器直连,免插件”&#xff1b…...

Factorio 异星工厂 [DLC 解锁] [Steam] [Windows SteamOS]

Factorio 异星工厂 [DLC 解锁] [Steam] [Windows & SteamOS] 注意 这个符号表示 可打开折叠内容 需要有游戏正版基础本体,安装路径不能带有中文,或其它非常规拉丁字符;请务必阅读 使用说明 (最新以网站说明为准&#xff09…...

LLM的min_p 参数详

min_p 参数详解 min-p采样,源自论文"Min P Sampling: Balancing Creativity and Coherence at High Temperature"。在大语言模型(LLM)中,min_p 通常是指在生成文本时的最小概率阈值(Minimum Probability),用于控制输出 token 的选择,特别是在核采样(Nucleus…...

C语言_可变参数_LOG宏

LOG宏一般处理&#xff0c;没有参数&#xff0c;只有字符串参数&#xff0c;字符串格式和一个参数&#xff0c;多个参数的场合。以下是针对常见的应用场合举例说明&#xff0c;可便参数的使用。 代码 #include <stdio.h>#define LOG(format, ...) printf("[%s][%…...

19.第二阶段x64游戏实战-vector容器

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 上一个内容&#xff1a;18.第二阶段x64游戏实战-MFC列表框 vector是一个封装了动态大小数组的顺序容器…...

第九节:图像处理基础-图像几何变换 (缩放、旋转、平移、翻转)

引言 在计算机视觉和图像处理领域&#xff0c;几何变换是最基础且应用最广泛的技术之一。通过改变图像的几何结构&#xff0c;我们可以实现图像缩放以适应不同分辨率设备&#xff0c;旋转图像以校正方向偏差&#xff0c;平移目标物体进行位置对齐&#xff0c;或通过翻转操作增…...

jmeter 执行顺序和组件作用域

本章节主要讲解“JMeter执行顺序与作用域”的内容&#xff0c;类似于运算符或操作符的优先级&#xff0c;当JMeter测试中包含多个不同的元素时&#xff0c;哪些元素先执行&#xff0c;哪些元素后执行&#xff0c;并不是严格按照它们出现的先后顺序依次有序执行的&#xff0c;而…...

mvc-review

review: 1.最初的做法&#xff1a;一个请求对应一个servlet&#xff0c;这样存在的问题是servlet太多了 2.改动&#xff1a;把一系列请求都对应一个servlet&#xff0c; IndexServlet / AddServlet / DelServlet / UpdateServlet ...-> 合并成FruitServlet 通过一个oper…...

基于ResNet50的手写符号识别系统

基于ResNet50的手写符号识别系统 项目概述 本项目实现了两个手写符号识别模型&#xff1a; ABCD字母识别模型&#xff1a;用于识别手写的A、B、C、D四个字母✓符号识别模型&#xff1a;用于识别手写的对勾(✓)和叉号() 两个模型均基于ResNet50预训练模型&#xff0c;采用迁…...

SpringBoot教学管理平台源码设计开发

概述 基于SpringBoot框架开发的​​教学管理平台​​完整项目&#xff0c;帮助开发者快速搭建在线教育平台。该系统包含学生端、教师端和管理后台&#xff0c;实现了课程管理、随堂测试、作业提交等核心功能&#xff0c;是学习SpringBoot开发的优质案例。 主要内容 1. 系统架…...

C++负载均衡远程调用学习之集成测试与自动启动脚本

目录 01 Lars-LbAgentV0.7-route_lb获取路由全部主机信息 02 Lars-LbAgentV0.7-API模块注册功能实现和测试工 03 Lars-LbAgentV0.7-项目构建工具 04 Lars-LbAgentV0.7-启动工具脚本实现 05 Lars-有关fd泄露的调试办法 06 Lars-qps性能测试 07 git企业开发基本流程 01 Lar…...

双ISP(双互联网服务提供商)

目录 核心作用 适用场景 实现方式 优缺点 假设一家外贸公司 双ISP&#xff08;双互联网服务提供商&#xff09; 是指用户同时接入两个不同的网络服务提供商&#xff08;Internet Service Provider&#xff09;&#xff0c;通过冗余设计或负载均衡技术&#xff0c;提升网络…...

网工实验——静态路由与BFD联动

网络拓扑图 实验目的&#xff1a; PC与Server通信的时候主要走上面&#xff0c;当主用电路失效的时候走下面 设备&#xff1a; 一台PC主机 一台Server服务器 两台Router路由器 一台S3700交换机 配置 1.配置PC和Server的IP地址 PC Server 2.配置路由器 R3配置对应接口…...

谷歌在即将举行的I/O大会之前,意外泄露了其全新设计语言“Material 3 Expressive”的细节

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

【网络原理】IP协议

目录 ​编辑 一. IP协议的作用 二. IP协议报头 三. 拆包和组包 四. 地址管理 1&#xff09;动态分配IP地址 2&#xff09;NAT机制&#xff08;网络地址映射&#xff09; 3&#xff09; IPV6 五. IP转换 1&#xff09;客户端到服务器 2&#xff09;服务器到客户端 六…...

【Python 文件I/O】

Python 的文件 I/O 操作是数据处理的基础技能&#xff0c;涉及文件的读写、路径管理、异常处理等核心功能。以下是文件 I/O 的核心知识点&#xff1a; 一、基础文件操作 1. 打开文件 # 通用模式&#xff1a;r(读)/w(写)/a(追加) b(二进制)/t(文本&#xff0c;默认) f open(…...

torchrun单机多卡运行

torchrun命令使用 torchrun示例 export CUDA_VISIBLE_DEVICES0,1,2 nohup torchrun \--nproc_per_node3 \--nnodes1 \--node_rank0 \--master_addr"127.0.0.1" \--master_port1225 \/data/train.py \--batch_size 32 \--size 320运行如上sh命令发现&#xff0c;即 …...

数据管理平台是什么?企业应如何做好数据化管理?

目录 一、数据管理是什么&#xff1f; 二、数据管理平台有哪些作用&#xff1f; 1. 数据采集与整合 2. 数据清洗与预处理 3. 数据分析与挖掘 4. 数据共享与协作 三、企业应如何做好数据化管理&#xff1f; 1. 建立数据管理战略 2. 完善数据管理制度 3. 培养数据管理人…...

GuassDB如何创建兼容MySQL语法的数据库

GaussDB简介 GaussDB是由华为推出的一款全面支持OLTP和OLAP的分布式关系型数据库管理系统。它采用了分布式架构和高可靠性设计&#xff0c;可以满足大规模数据存储和处理的需求。GaussDB具有高性能、高可靠性和可扩展性等特点&#xff0c;适用于各种复杂的业务场景&#xff0c…...

Qt国际化实战--精通Qt Linguist工具链

概述 在全球化的今天,软件产品需要支持多种语言和地区,以满足来自世界各地用户的需求。Qt框架提供了一套完整的工具集来帮助开发者实现应用程序的国际化(i18n)和本地化(l10n),其中最核心的就是Qt Linguist工具链 关于国际化与本地化 国际化(i18n): 指的是设计和开发…...

C++内联函数

总结&#xff1a;内联函数是把函数变成一个代码块直接塞入源程序中&#xff0c;省去了一些参数传递和栈操作&#xff08;省时间&#xff09;&#xff0c;但是同时又增加了代码的大小&#xff08;因为原本的函数只有会使用指针指向该函数&#xff0c;但是内联函数是直接塞入&…...

26届秋招收割offer指南

26届暑期实习已经陆续启动&#xff0c;这也意味着对于26届的同学们来说&#xff0c;“找工作”已经提上了日程。为了帮助大家更好地准备暑期实习和秋招&#xff0c;本期主要从时间线、学习路线、核心知识点及投递几方面给大家介绍&#xff0c;希望能为大家提供一些实用的建议和…...

Python之内省与反射应用

Python之内省与反射应用 Python作为一门动态语言&#xff0c;具备了强大的内省&#xff08;Introspection&#xff09;与反射&#xff08;Reflection&#xff09;机制。这两个概念在运行时查看对象的属性、类型、方法等信息&#xff0c;甚至可以动态调用方法或修改对象的属性。…...

第三章:langchain加载word文档构建RAG检索教程(基于FAISS库为例)

文章目录 前言一、载入文档&#xff08;word&#xff09;1、文档载入代码2、文档载入数据解读&#xff08;Docx2txtLoader方法&#xff09;输入数据输出文本内容 3、Docx2txtLoader底层代码文档读取解读Docx2txtLoader底层源码示例文档读取输出结果 二、文本分割1、文本分割代码…...

球速最快的是哪种球类运动·棒球1号位

在体育运动中&#xff0c;球速最快的项目与棒球结合来看&#xff0c;可以分两个角度解读&#xff1a; 一、球速最快的运动项目 羽毛球以426公里/小时&#xff08;吉尼斯纪录&#xff09;的杀球速度位列榜首&#xff0c;远超棒球投球速度。其极速源于&#xff1a; 羽毛球拍甜区…...

TVM中Python如何和C++联调?

1. 编译 Debug 版本 # 在项目根目录下创建构建目录&#xff08;若尚未创建&#xff09; mkdir -p build && cd build# 配置 Debug 构建 cmake -DCMAKE_BUILD_TYPEDebug ..# 编译&#xff08;根据 CPU 核心数调整 -j 参数&#xff09; make -j$(nproc)2. 获取 Python 进…...

从零实现基于Transformer的英译汉任务

1. model.py&#xff08;用的是上一篇文章的代码&#xff1a;从0搭建Transformer-CSDN博客&#xff09; import torch import torch.nn as nn import mathclass PositionalEncoding(nn.Module):def __init__ (self, d_model, dropout, max_len5000):super(PositionalEncoding,…...

在 PyTorch 中借助 GloVe 词嵌入完成情感分析

一. Glove 词嵌入原理 GloVe是一种学习词嵌入的方法&#xff0c;它希望拟合给定上下文单词i时单词j出现的次数。使用的误差函数为&#xff1a; 其中N是词汇表大小&#xff0c;是线性层参数&#xff0c; 是词嵌入。f(x)是权重项&#xff0c;用于平衡不同频率的单词对误差的影响…...

大数据应用开发和项目实战-电商双11美妆数据分析

数据初步了解 &#xff08;head出现&#xff0c;意味着只出现前5行&#xff0c;如果只出现后面几行就是tail&#xff09; info shape describe 数据清洗 重复值处理 这个重复值是否去掉要看实际情况&#xff0c;比如说&#xff1a;昨天卖了5瓶七喜&#xff0c;今天卖了5瓶七…...

web服务

一、nginx的安装与启用 nginx的安装 开源版本的Nginx官网&#xff1a;http://nginx.org Nginx在安装的过程中可以选择源码安装也可以选择使用软件包安装 源码安装下载相应的源码压缩包解压后编译完成安装 软件安装包可以使用rpm或者apt命令进行安装&#xff0c;也可以使用dnf…...

在Spring Boot 中如何配置MongoDB的副本集 (Replica Set) 或分片集群 (Sharded Cluster)?

在 Spring Boot 中配置 MongoDB 副本集 (Replica Set) 或分片集群 (Sharded Cluster) 非常相似&#xff0c;主要区别在于连接字符串 (URI) 中提供的主机列表和一些特定选项。 最常的方式是使用 spring.data.mongodb.uri 属性配置连接字符串。 1. 连接到 MongoDB 副本集 (Repl…...

Oracle中游标和集合的定义查询及取值

在 Oracle 存储过程中&#xff0c;使用游标处理自定义数据行类型时&#xff0c;可以通过 定义记录类型&#xff08;RECORD&#xff09; 和 游标&#xff08;CURSOR&#xff09; 结合实现。 1. 定义自定义记录类型 使用 TYPE … IS RECORD 定义自定义行数据类型&#xff1a; DE…...

Python企业级MySQL数据库开发实战指南

简介 Python与MySQL的完美结合是现代Web应用和数据分析系统的基石,能够创建高效稳定的企业级数据库解决方案。本文将从零开始,全面介绍如何使用Python连接MySQL数据库,设计健壮的表结构,实现CRUD操作,并掌握连接池管理、事务处理、批量操作和防止SQL注入等企业级开发核心…...

【LLM】Open WebUI 使用指南:详细图文教程

Open WebUI 是一个开源的、可扩展且用户友好的自托管 AI 平台,专为生成式人工智能模型交互而设计。 Open WebUI 旨在为用户提供一个简单易用、功能强大且高度定制化的界面,使其能够轻松与各种 AI 模型(如文本生成、图像生成、语音识别等)进行交互。 一、安装与初始化配置 扩…...

前端封装框架依赖管理全攻略:构建轻量可维护的私有框架

前端封装框架依赖管理全攻略&#xff1a;构建轻量可维护的私有框架 前言 在自研前端框架的开发中&#xff0c;依赖管理是决定框架可用性的关键因素。不合理的依赖设计会导致&#xff1a; 项目体积膨胀&#xff1a;重复依赖使最终打包体积增加30%版本地狱&#xff1a;不同项目…...