CSS篇-2
4. position 的值分别是相对于哪个位置定位的？
position 属性是 CSS 布局中一个非常核心的概念，它允许我们精确控制元素在文档中的定位方式，从而脱离或部分脱离正常的文档流。理解 position 的不同值以及它们各自的定位基准，是实现复杂页面布局、弹窗、导航等效果的基础。
position 属性有五个主要的值：static、relative、absolute、fixed 和 sticky。我们来逐一分析它们各自的定位特点：
-
static(静态定位)-
定位基准： 没有定位。
-
说明： 这是所有 HTML 元素的默认值。当一个元素的
position属性是static时，它会完全按照正常的文档流（normal document flow）来布局。这意味着它会按照 HTML 源代码中的顺序，从上到下、从左到右依次排列。此时，top、right、bottom、left和z-index属性都将无效。 -
使用场景： 绝大多数元素默认就是
static定位，通常不需要显式设置。
-
-
relative(相对定位)-
定位基准： 相对于元素自身在正常文档流中的原始位置进行定位。
-
说明： 当一个元素设置为
position: relative;时，它仍然会保留其在正常文档流中占据的空间，不会脱离文档流。然后，你可以使用top、right、bottom、left这四个属性来“微调”它的位置。这个“微调”是相对于它本来应该在的位置进行的。 -
特点：
-
不脱离文档流： 元素所占据的空间依然保留，不会影响周围其他元素的布局。
-
可作为绝对定位的参照物： 这是
relative最重要的用途之一。当一个父元素设置为position: relative;时，它的后代元素如果设置为position: absolute;，就可以相对于这个父元素进行定位，而不再是body或根元素。
-
-
示例：
div { position: relative; top: 20px; left: 30px; }这会使div元素向下移动 20px，向右移动 30px，但它原先占据的位置依然保留。
-
-
absolute(绝对定位)-
定位基准： 相对于其最近的、已定位的（
position值为relative、absolute、fixed或sticky）祖先元素进行定位。 如果找不到任何已定位的祖先元素，那么它将相对于**初始包含块（通常是<html>元素，也就是浏览器窗口的文档区域）**进行定位。 -
说明： 当一个元素设置为
position: absolute;时，它会完全脱离正常的文档流。这意味着它不再占据任何空间，其后的兄弟元素会“填补”它原先的位置。然后，你可以使用top、right、bottom、left属性来精确地设置它的位置。 -
特点：
-
脱离文档流： 这是与
relative最主要的区别。 -
层叠： 绝对定位的元素会创建新的堆叠上下文，可以通过
z-index属性控制其在垂直方向上的层叠顺序。 -
常用搭配： 通常与
position: relative;的父元素配合使用，形成“父相子绝”的布局模式，这是一种非常常见的布局技巧。
-
-
示例：
<div style="position: relative; width: 200px; height: 200px; border: 1px solid red;"><span style="position: absolute; top: 10px; right: 10px; background: yellow;">我在这里</span> </div>这里的
span会相对于红色的div元素，从上边缘向下 10px，从右边缘向左 10px 进行定位。
-
-
fixed(固定定位)-
定位基准： 相对于浏览器窗口（或视口 - viewport）进行定位。 即使页面滚动，固定定位的元素也会保持在屏幕上的相同位置。
-
说明：
fixed定位的元素也会完全脱离正常的文档流。它的位置是相对于浏览器窗口的左上角来计算的。当用户滚动页面时，固定定位的元素会始终保持在屏幕上的固定位置，不会随着滚动条的移动而移动。 -
特点：
-
脱离文档流： 与
absolute类似。 -
不随页面滚动： 核心特性，常用于创建固定在顶部的导航栏、侧边栏、返回顶部按钮等。
-
z-index 有效： 可以通过
z-index控制层叠顺序。
-
-
示例：
div.fixed-header { position: fixed; top: 0; left: 0; width: 100%; background: lightblue; }这样就会创建一个始终固定在浏览器窗口顶部的蓝色头部。
-
-
sticky(粘性定位) - CSS3 新增-
定位基准：
-
当元素在可视区域内时，它表现得像
position: relative;，即相对于其在正常文档流中的位置进行定位。 -
当元素滚动到预设的阈值（由
top、right、bottom、left属性定义）时，它会变成position: fixed;，即相对于浏览器窗口进行定位，并“粘滞”在那个位置。
-
-
说明：
sticky定位是relative和fixed的结合体。它允许元素在特定条件下在relative和fixed之间切换。元素会首先按照正常的文档流布局，但当它滚动到视口的某个特定点（例如top: 0）时，就会“粘”在那个位置，直到其父容器的底部离开视口。 -
特点：
-
不脱离文档流 (初始状态)： 在未触发粘性效果时，元素仍占据其在文档流中的空间。
-
行为动态： 随着滚动而改变定位行为。
-
父容器限制： 粘性元素只会在其直系父容器内粘滞，当父容器滚出视口时，粘性元素也会随之消失。
-
-
示例： 常见的应用是导航栏，在页面顶部时正常显示，滚动到一定位置后，会固定在顶部，提供便捷的导航。
.sticky-header {position: sticky;top: 0; /* 当元素顶部达到视口顶部时粘滞 */background-color: #eee;padding: 10px; } -
提醒：
sticky是 CSS3 中新增的属性，它为滚动时的交互提供了非常方便的解决方案，避免了使用 JavaScript 来实现类似的效果。
-
总结表格：
position 值 | 是否脱离文档流 | 定位基准 | top/right/bottom/left 属性作用 | 主要用途 |
|---|---|---|---|---|
static | 否 | 无（正常文档流） | 无效 | 默认值，正常布局 |
relative | 否 | 自身原始位置 | 微调位置，保留空间 | 微调、作为绝对定位元素的参照物 |
absolute | 是 | 最近的已定位祖先元素，或初始包含块 | 精确定位 | 覆盖、弹窗、复杂布局（父相子绝） |
fixed | 是 | 浏览器窗口（视口） | 精确定位 | 固定导航、返回顶部按钮、弹窗 |
sticky | 否（初始）/ 是（粘滞时） | 自身原始位置 / 浏览器窗口（视口） | 定义粘滞触发位置 | 粘性导航栏、侧边栏标题等，随滚动动态切换定位方式 |
正确理解和运用 position 属性，能让开发者在页面布局方面拥有极大的灵活性和控制力，实现各种复杂的视觉效果和交互体验。
5. 请说明 position: absolute 和 float 属性的异同。
position: absolute 和 float 都是 CSS 中用于改变元素在页面上定位方式的属性，它们都能使元素脱离正常的文档流。然而，它们的设计目的、工作机制和对周围元素的影响有着本质的区别。理解这些异同，对于进行精确的页面布局和避免布局问题至关重要。
相同点 (Similarties)：
-
脱离正常文档流 (Out of Normal Flow)：
-
无论是设置
float属性（非none值）还是position: absolute，受影响的元素都会脱离正常的文档流。这意味着它们在布局时不再占据其原有的空间。
-
-
可设置宽高 (Can Set Width/Height)：
-
当对一个内联元素（如
<span>、<a>使用position: absolute时，这些内联元素会自动转化为块级元素的特性，即它们会支持width、height、margin、padding等块级元素的属性。它们不再像内联元素那样只根据内容决定宽高，而是可以明确设置尺寸。
-
-
层叠上下文 (Stacking Context)：
-
尽管它们的机制不同，但当元素被设置为
position: absolute或float(非none) 时，它们都可能创建新的层叠上下文。这意味着它们可以通过z-index属性来控制它们在垂直方向上的堆叠顺序，从而决定哪个元素会覆盖在另一个元素之上。
-
不同点 (Differences)：
-
脱离文档流的程度和方式：
-
float： 元素脱离文档流，但它仍然部分地保留了其在文档流中的“存在感”。它会浮动到其父容器的左侧或右侧，直到遇到父容器的边缘或另一个浮动元素。虽然它不再占据空间，但它依然会影响其后续非浮动兄弟元素的文本内容，使其围绕浮动元素进行排列。-
特点： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框（父元素）或另一个浮动框的边框为止。这意味着浮动元素之间会相互影响，并且受限于父元素的边界。
-
-
position: absolute： 元素是完全彻底地脱离了正常的文档流。它不再占据任何空间，就像它从 HTML 结构中被“剪切”出来了一样。文档流中的其他元素会忽略它的存在，并且会按照它不存在的方式进行布局。-
特点： 绝对定位的元素会覆盖文档流中的其他元素，即产生“遮盖现象”。它完全独立于文档流，可以精确地放置在其定位上下文（通常是最近的已定位祖先元素）内的任何位置。
-
-
-
定位的参照物：
-
float： 浮动元素是相对于其父元素的“内容区域”进行浮动的，并且会沿着其所在的文本流进行排列，或者与同级的浮动元素并排。它更多地是一种“流式布局”的微调。 -
position: absolute： 绝对定位的元素是相对于其最近的已定位祖先元素（即position值非static的祖先元素）进行定位的。如果没有这样的祖先，则相对于初始包含块（通常是<html>元素，也就是浏览器视口）进行定位。它的定位是精确的，通过top,right,bottom,left属性控制。
-
-
对父元素高度的影响：
-
float： 这是浮动最常见的问题之一。当子元素浮动时，父元素由于无法感知到浮动子元素的高度，会导致高度塌陷。需要通过清除浮动（如overflow: hidden或伪元素clearfix）来解决。 -
position: absolute： 由于绝对定位元素完全脱离文档流，它们不会影响父元素的高度。父元素的高度将由其非绝对定位的子元素来决定。
-
-
布局目的和应用场景：
-
float： 早期主要用于实现多列布局（如博客文章的侧边栏和主内容区）、图文混排（文字环绕图片）等。它更适合创建块级元素之间的水平排列关系。随着 Flexbox 和 CSS Grid 的出现，其在复杂布局中的地位已被取代，但仍用于简单的图文混排。 -
position: absolute： 主要用于实现元素的精确位置控制，例如创建模态框、工具提示（tooltip）、下拉菜单、徽章（badge）、遮罩层等，以及在父元素内部进行子元素的叠放和覆盖。它非常适合实现重叠效果和复杂组件的内部定位。
-
总结表格：
| 特性 | float | position: absolute |
|---|---|---|
| 脱离文档流 | 是（部分） | 是（完全） |
| 影响兄弟元素 | 影响后续非浮动兄弟元素的内容环绕 | 不影响兄弟元素，兄弟元素会填补其原位 |
| 对父元素高度 | 导致父元素高度塌陷，需要清除浮动 | 不影响父元素高度 |
| 定位参照物 | 父元素的内容区域，沿文本流浮动 | 最近的已定位祖先元素，或视口 |
| 是否占据空间 | 不占据（但影响内容流） | 不占据 |
z-index | 有效（创建层叠上下文） | 有效（创建层叠上下文） |
| 典型应用场景 | 多列布局（旧）、图文混排 | 精确定位、覆盖、弹窗、层叠效果 |
理解这些异同是进行有效 CSS 布局的基础。在现代前端开发中，我们通常会根据具体的布局需求，灵活选择 float、position、Flexbox 或 CSS Grid 等不同的布局技术，以达到最佳效果和可维护性。
6. CSS 选择器（符）有哪些？
CSS 选择器是 CSS 的核心，它们是样式规则的“矛”，精准地指向 HTML 文档中需要应用样式的元素。掌握各种选择器是前端开发者的基本功，因为它直接决定了我们能否高效、准确地控制页面外观。CSS 选择器种类繁多，大致可以分为以下几大类：
-
基本选择器 (Basic Selectors)：
-
ID 选择器 (ID Selector)：
-
语法：
#后面跟元素的id属性值。 -
作用： 选中 HTML 中具有特定
id属性的唯一元素。一个id值在整个 HTML 文档中应该是独一无二的。 -
示例：
#header { color: blue; }会选中<div id="header">元素。 -
特点： 优先级最高（在基本选择器中），但因为其唯一性，不适合复用。
-
-
类选择器 (Class Selector)：
-
语法：
.后面跟元素的class属性值。 -
作用： 选中 HTML 中具有特定
class属性值的所有元素。一个元素可以有多个类，一个类也可以应用于多个元素。 -
示例：
.btn { padding: 10px; }会选中所有class="btn"的元素。 -
特点： 高度可复用，是日常开发中使用最频繁的选择器之一。
-
-
标签选择器 / 元素选择器 (Type Selector / Tag Selector)：
-
语法： 直接使用 HTML 元素的标签名。
-
作用： 选中 HTML 文档中所有该类型的元素。
-
示例：
p { font-size: 14px; }会选中所有<p>元素。 -
特点： 最基础的选择器，通常用于设置元素的默认样式。
-
-
通配符选择器 (Universal Selector)：
-
语法：
* -
作用： 选中 HTML 文档中的所有元素。
-
示例：
* { margin: 0; padding: 0; }常用于重置所有元素的默认内外边距。 -
特点： 优先级最低（除继承外），会选中页面所有元素，需谨慎使用，以免影响性能或产生不必要的样式。
-
-
-
组合选择器 (Combinator Selectors)：
组合选择器通过不同的符号将多个简单选择器连接起来，从而根据元素之间的关系来选中目标元素。-
后代选择器 (Descendant Selector)：
-
语法： 用空格分隔两个或多个选择器。
-
作用： 选中作为第一个选择器指定元素的所有后代元素（包括子元素、孙子元素等）。
-
示例：
div p { color: red; }会选中所有在<div>元素内部的<p>元素。
-
-
子选择器 (Child Selector)：
-
语法： 用
>符号分隔两个选择器。 -
作用： 选中作为第一个选择器指定元素的直接子元素。
-
示例：
ul > li { list-style: none; }只会选中<ul>的直接子元素<li>，而不会选中孙子辈的<li>。
-
-
相邻兄弟选择器 (Adjacent Sibling Selector)：
-
语法： 用
+符号分隔两个选择器。 -
作用： 选中紧接在第一个选择器指定元素之后的那个兄弟元素（即它们有共同的父元素，并且第二个元素紧跟在第一个元素后面）。
-
示例：
h1 + p { margin-top: 20px; }会选中紧跟在<h1>之后的第一个<p>元素。
-
-
通用兄弟选择器 (General Sibling Selector)：
-
语法： 用
~符号分隔两个选择器。 -
作用： 选中与第一个选择器指定元素具有相同父元素，并且位于第一个选择器之后的所有兄弟元素。
-
示例：
h1 ~ p { background-color: yellow; }会选中<h1>之后的所有<p>兄弟元素。
-
-
-
属性选择器 (Attribute Selectors)：
-
语法： 用方括号
[]包裹属性名，可选地包含属性值及匹配规则。 -
作用： 根据元素的属性是否存在或属性值是否匹配来选中元素。
-
常见形式：
-
[attribute]：选中具有该属性的元素。示例：[disabled]选中所有有disabled属性的元素。 -
[attribute="value"]：选中属性值为特定值的元素。示例：input[type="text"]选中所有type属性为text的input元素。 -
[attribute^="value"]：选中属性值以特定字符串开头的元素。 -
[attribute$="value"]：选中属性值以特定字符串结尾的元素。 -
[attribute*="value"]：选中属性值包含特定字符串的元素。 -
[attribute~="value"]：选中属性值包含用空格分隔的特定单词的元素（单词必须是完整的）。 -
[attribute|="value"]：选中属性值以特定字符串开头，且后跟连字符-的元素（常用于语言代码）。
-
-
特点： 非常灵活，适用于需要根据元素属性状态或值来施加样式的情况。
-
-
伪类选择器 (Pseudo-classes)：
-
语法： 单冒号
:后面跟伪类名。 -
作用： 选中处于某种特定状态的元素，或者根据元素在文档树中的特定位置/结构来选中元素。它们描述的是一种“抽象的”或“临时的”状态，而不是实际的 HTML 元素或属性。
-
CSS3 建议： 为了与伪元素区分开来，CSS3 建议伪类使用单冒号
:。 -
常见伪类：
-
用户行为伪类：
:hover(鼠标悬停),:active(被激活),:focus(获得焦点),:visited(已访问链接),:link(未访问链接)。 -
结构性伪类：
:first-child(第一个子元素),:last-child(最后一个子元素),:nth-child(n)(第 n 个子元素),:nth-of-type(n)(第 n 个特定类型的子元素)。 -
表单伪类：
:enabled,:disabled,:checked,:valid,:invalid。 -
否定伪类：
:not(selector)(不匹配指定选择器的元素)。
-
-
示例：
a:hover { text-decoration: underline; }(鼠标悬停在链接上时加下划线)；li:nth-child(odd) { background-color: #f0f0f0; }(选中奇数序的列表项)。
-
-
伪元素选择器 (Pseudo-elements)：
-
语法： 双冒号
::后面跟伪元素名。 -
作用： 选中元素中特定的一部分，或者在元素内容的前后插入生成的内容。它们不对应真实的 HTML 元素，而是由 CSS 引擎在渲染时“虚拟”地创建出来的。
-
CSS3 建议： 为了与伪类区分开来，CSS3 建议伪元素使用双冒号
::。早期版本（如 CSS2.1）也可以使用单冒号，但双冒号是更标准的写法。 -
常见伪元素：
-
::before：在元素内容前面插入生成的内容。常与content属性配合使用。 -
::after：在元素内容后面插入生成的内容。常与content属性配合使用（例如用于清除浮动）。 -
::first-letter：选中元素文本内容的第一个字母。 -
::first-line：选中元素文本内容的第一行。 -
::selection：选中用户高亮（选择）的文本。 -
::placeholder：选中表单输入框的占位符文本。
-
-
示例：
p::first-letter { font-size: 2em; font-weight: bold; }(让段落的第一个字母变大变粗)。
-
总结：
CSS 选择器提供了极其丰富和灵活的方式来选择和样式化 HTML 元素。从最基础的元素选择器，到基于关系、属性、状态和虚拟部分的复杂选择器，它们共同构成了 CSS 样式规则的强大匹配机制。在实际开发中，合理、高效地使用这些选择器，是编写出健壮、可维护、高性能 CSS 代码的关键。
选择器的效率和特异性（权重）是需要考量的因素。通常建议使用尽可能具体且高效的选择器来定位元素，避免使用过于宽泛的通配符选择器，同时也要平衡选择器的复杂度与可读性。
相关文章：
CSS篇-2
4. position 的值分别是相对于哪个位置定位的？ position 属性是 CSS 布局中一个非常核心的概念，它允许我们精确控制元素在文档中的定位方式，从而脱离或部分脱离正常的文档流。理解 position 的不同值以及它们各自的定位基准，是实…...
02.K8S核心概念
服务的分类 有状态服务：会对本地环境产生依赖，例如需要把数据存储到本地磁盘，如mysql、redis； 无状态服务：不会对本地环境产生任何依赖，例如不会存储数据到本地磁盘，如nginx、apacheÿ…...
一套qt c++的串口通信
实现了创建线程使用串口的功能 具备功能: 1.线程使用串口 2.定时发送队列内容，防止粘包 3.没处理接收粘包，根据你的需求来，handleReadyRead函数中，可以通过m_receiveBuffer来缓存接收，然后拆分数据来处理 源码 seri…...
【高频面试题】数组中的第K个最大元素（堆、快排进阶）
文章目录 数组中的第K个最大元素题目描述示例1示例2提示： 解法1（堆维护前k大元素）解法2 手写堆维护解法3（快速选择算法）例题：P1923 【深基9.例4】求第 k 小的数参考 数组中的第K个最大元素 题目描述 给定…...
Java互联网大厂面试：从Spring Boot到Kafka的技术深度探索
Java互联网大厂面试：从Spring Boot到Kafka的技术深度探索 在某家互联网大厂的面试中，面试官A是一位技术老兵，而被面试者谢飞机，号称有丰富的Java开发经验。以下是他们的面试情景： 场景：电商平台的后端开发…...
基于Python的单斜式ADC建模与仿真分析
基于Python的单斜式ADC建模与仿真分析 1 引言 CMOS图像传感器的读出电路中，列级ADC因其面积效率高（每列共享ADC）、功耗低（并行工作降低频率需求）和固定模式噪声小（结构对称性高）等优势成为大像素阵列的首选方案。本文针对50KS/s采样率、10位分辨率的单斜式ADC进行系统…...
笔记本电脑右下角wifi不显示，连不上网怎么办？
解决思路：设备管理器--先禁用wifi6硬件-再启用wifi6硬件（20秒搞定） 笔记本电脑右下角的wifi经常莫名其妙的不显示，连不上网，感觉应该是与什么程序不兼容，导致wifi模块被办掉了，怎么这种情况出现…...
一篇文章玩转CAP原理
CAP 原理是分布式系统设计的核心理论之一，揭示了系统设计中的 根本性权衡。 一、CAP 的定义 CAP 由三个核心属性组成，任何分布式系统最多只能同时满足其中两个： 一致性（Consistency） 所有节点在同一时刻看到的数据完全…...
Vue-收集表单信息
收集表单信息 Input label for 和 input id 关联, 点击账号标签 也能聚焦 input 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>表单数据</title><!-- 引入Vue --><scrip…...
私服 nexus 之间迁移 npm 仓库
本文介绍如何将一个 Nexus 特定仓库中的 npm 包内容迁移到另一个 Nexus 特定仓库。此过程适用于需要重构仓库结构或合并仓库的场景。 迁移脚本 以下是完整的迁移脚本，它会自动完成以下操作： 从源仓库获取所有 npm 包列表下载每个包的 .tgz 文件解压并…...
微服务及容器化设计--可扩展的架构设计
引言 在当今快速发展的技术环境中，企业需要构建能够适应变化、支持快速迭代且可靠的软件系统。传统的单体应用架构在面对高并发、大规模部署和复杂业务逻辑时往往力不从心。微服务架构结合容器化技术应运而生，成为现代可扩展系统设计的主流选择。本文将…...
vscode开发stm32，main.c文件中出现很多报错影响开发解决日志
本质上为 .vscode/c_cpp_properties.json文件和Makefile文件中冲突，两者没有同步。 将makefile文件中的内容同步过来即可，下面给出一个json文件的模板，每个人的情况不同，针对性修改即可 {"configurations": [{"na…...
嵌入式鸿蒙系统中水平和垂直以及图片调用方法
利用openharmony操作的具体现象： 第一：Column 作用：沿垂直方向布局的容器。 第二：常用接口 Column(value?: {space?: string | number}) 参数： 参数名参数类型必填参数描述spacestring | number否纵向布局元素垂直方向间距。 从API version 9开始，space为负数或者ju…...
【海康USB相机被HALCON助手连接过后，MVS显示无法连接故障。】
在Halcon里使用助手调用海康USB相机时，如果这个界面点击了【是】 那么恭喜你，相机只能被HALCON调用使用，使用MVS或者海康开发库，将查找不到相机 解决方式： 右键桌面【此电脑】图标 ->选择【管理】 ->选择【设备…...
面试大厂Java：从Spring Boot到微服务架构
面试大厂Java：从Spring Boot到微服务架构 在一个阳光明媚的下午，谢飞机来到了某知名互联网大厂的面试现场，迎接他的是一位严肃的面试官。 第一轮提问： 面试官： 谢飞机，请你简单介绍一下Spring Boot的核心…...
2025年电气工程与轨道交通国际会议：绿色能源与智能交通的创新之路
2025年电气工程与轨道交通国际会议（ICEERT 2025）是一场电气工程与轨道交通领域的国际盛会，将于2025年在武汉隆重召开。此次会议汇聚了全球顶尖的专家学者和行业精英，共同探讨电气工程与轨道交通的最新研究成果和技术趋势。会议将围…...
macOS 安装 Grafana + Prometheus + Node Exporter
macOS 安装指南：Grafana Prometheus Node Exporter 目录简介🚀 快速开始 安装 Homebrew1. 安装 Homebrew2. 更新 Homebrew 安装 Node Exporter使用 Homebrew 安装验证 Node Exporter 安装 Prometheus使用 Homebrew 安装验证安装 安装 Grafana使用 Home…...
WPF log4net用法
WPF log4net用法 一、在工程中管理NuGet程序包，找到log4net，点击安装，如下图已成功安装； 二、在工程中右键添加新建项，选择应用程序配置文件（后缀为.config）,然后设置名称，这里设置…...
数字孪生数据监控如何提升汽车零部件工厂产品质量
一、汽车零部件工厂的质量挑战 汽车零部件作为汽车制造的基础，其质量直接关系到整车的性能、可靠性和安全性。在传统的汽车零部件生产过程中，质量问题往往难以在早期阶段被发现和解决，导致生产效率低下、生产成本上升，甚至影响到…...
web自动化-Selenium、Playwright、Robot Framework等自动化框架使用场景优劣对比
Web 自动化测试框架根据不同的技术栈和应用场景可分为多种类型，以下是常见的框架及其特点、适用场景： 一、主流框架分类 1. Selenium 生态（Python/Java/C#/JavaScript） 核心组件： WebDriver：操作浏览器的…...
使用 Akamai 分布式云与 CDN 保障视频供稿传输安全
作者简介：David Eisenbacher 是 EZDRM 公司的首席执行官兼联合创始人，该公司是首家提供 "DRM 即服务" 的企业。作为 CEO，David 始终秉持为企业确立的使命：为视频服务商提供简洁有效的数字版权管理方案，助力其…...
vue发版html 生成打包到docker镜像进行发版
将Vue项目打包成Docker镜像部署主要分为以下几个步骤： 1. Vue项目打包 执行npm run build生成dist文件夹，包含静态资源文件 注意检查index.html中资源引用路径是否正确（避免绝对路径问题） 2. 编写Dockerfile Copy Code FROM…...
python uv包管理器使用
官方文档：uv官方文档 注：uv安装不依赖python。 使用： python版本管理 # 查看已安装的python列表 uv python list # 安装特定版本 uv python install 3.12 # 指定项目使用的python版本 uv python pin <version># 使用指定版本运行脚本…...
贪心算法实战3
文章目录 前言区间问题跳跃游戏跳跃游戏II用最少数量的箭引爆气球无重叠区间划分字母区间合并区间 最大子序和加油站监控二叉树 前言 今天继续带大家进行贪心算法的实战篇3，本章注意来解答一些运用贪心算法的比较难的问题，大家好好体会，怎么…...
linux、docker、git相关操作
1 linux 1.1解压缩 1.1.1 zip zip xxx.zip file 把file压缩成xxx.zip -r 递归压缩： zip -r example_new.zip 示例集 # 新建压缩包并命名为 example_new.zip zip -r xxx.zip file1 file2 dir1 将多个文件目录压成zip包 unzip file.zip -d target_dir #把file.zip解…...
实测，大模型谁更懂数据可视化？
大家好，我是 Ai 学习的老章 看论文时，经常看到漂亮的图表，很多不知道是用什么工具绘制的，或者很想复刻类似图表。 实测，大模型 LaTeX 公式识别，出乎预料 前文，我用 Kimi、Qwen-3-235B-A22B、…...
小程序32-简易双向数据绑定
在WXML中，普通属性的绑定是单向的，例如:<input value"{{value}}" /> 如果希望用户输入数据的同时改变data中的数据，可以借助简易双向绑定机制。在对应属性之前添加model:前缀即可: 例如<input model:value"{{value}…...
jenkins报错java.lang.OutOfMemoryError: Java heap space
报错信息 2025-05-27 09:17:16.2340000 [id38] WARNING j.u.ErrorLoggingScheduledThreadPoolExecutor#afterExecute: failure in task not wrapped in SafeTimerTask java.lang.OutOfMemoryError: Java heap spaceat java.base/java.lang.StringUTF16.compress(StringUTF16.j…...
leetcode669.修剪二叉搜索树：递归法利用有序性精准剪枝
一、题目深度解析与BST特性应用 题目描述 给定一棵二叉搜索树（BST）和一个值区间[low, high]，修剪BST使得所有节点的值都落在该区间内。修剪后的树必须保持BST的性质，且不能改变原有节点的相对位置关系。 BST的核心特性应用 二…...
Spring Boot 中 @RequestParam 和 @RequestPart 的区别详解（含实际项目案例）
Spring Boot 中 RequestParam 和 RequestPart 的区别详解（含实际项目案例） 在日常的 Spring Boot 开发中，我们经常会遇到表单提交、文件上传、JSON 参数绑定等需求。而在处理这类请求时，两个常见的注解——RequestParam 和 Reque…...