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

05-CSS

news 2025/12/27 14:22:15

今日目标
能够说出为什么要用定位
能够说出定位的 4 种分类
能够说出 4 种定位各自的特点
能够说出为什么常用子绝父相布局
能够写出淘宝轮播图布局
能够说出显示隐藏的 3 种方式以及区别

1. 定位(position) 介绍

1.1 为什么使用定位

我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？

场景1：某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.

场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

结论：要实现以上效果，标准流或浮动都无法快速实现

所以：

1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

1.2 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

1.2.1 边偏移（方位名词）

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。

1.2.2 定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; 
}

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

1.3 定位模式介绍

1.3.1. 静态定位(static) - 了解

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。

语法：

选择器 { position: static; 
}

静态定位按照标准流特性摆放位置，它没有边偏移。

静态定位在布局时我们几乎不用的

1.3.2. 相对定位(relative) - 重要

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。

语法：

选择器 { position: relative; 
}

相对定位的特点：（务必记住）

1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

效果图：

1.3.3. 绝对定位(absolute) - 重要

1.3.3.1 绝对定位的介绍

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

语法：

 选择器 { position: absolute; }

完全脱标 —— 完全不占位置；

父元素没有定位，则以浏览器为准定位（Document 文档）。

父元素要有定位

元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点总结：（务必记住）

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

1.3.3.2 定位口诀 —— 子绝父相

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

这个“子绝父相”太重要了，是我们学习定位的口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？

观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。

分析：

方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。

父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。

如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

1.3.4. 固定定位(fixed) - 重要

固定定位是元素固定于浏览器可视区的位置。（认死理型）主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：

 选择器 { position: fixed; }

固定定位的特点：（务必记住）：

1.以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系

不随滚动条滚动。

2.固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）

完全脱标—— 完全不占位置；

只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性来设置元素的位置；

跟父元素没有任何关系；单独使用的

不随滚动条滚动。

固定定位举例：

提示：IE 6 等低版本浏览器不支持固定定位。

1.3.5 粘性定位(sticky) - 了解

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

语法：

 选择器 { position: sticky; top: 10px; }

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE 不支持。

1.3.6 定位总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对于自身位置移动	基本单独使用
absolute绝对定位	是（不占有位置）	带有定位的父级	要和定位父级元素搭配使用
fixed 固定定位	是（不占有位置）	浏览器可视区	单独使用，不需要父级
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少

一定记住相对定位、固定定位、绝对定位两个大的特点： 1. 是否占有位置（脱标否） 2. 以谁为基准点移动位置。

学习定位重点学会子绝父相。

注意：

边偏移需要和定位模式联合使用，单独使用无效；

top 和 bottom 不要同时使用；

left 和 right 不要同时使用。

3. 定位(position)的应用

3.1. 固定定位小技巧：固定在版心左侧位置。

小算法：

1.让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。

2.让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

案例效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>固定定位小技巧-固定到版心右侧</title><style>.w {width: 800px;height: 1400px;background-color: pink;margin: 0 auto;}.fixed {position: fixed;/* 1. 走浏览器宽度的一半 */left: 50%;/* 2. 利用margin 走版心盒子宽度的一半距离 */margin-left: 405px;width: 50px;height: 150px;background-color: skyblue;}</style>
</head>
<body><div class="fixed"></div><div class="w">版心盒子 800像素</div></body>
</html>

3.2. 堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

语法：

选择器 { z-index: 1; 
}

z-index 的特性如下：

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；

如果属性值相同，则按照书写顺序，后来居上；

数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>定位的堆叠顺序</title><style>.box {position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.xiongda {background-color: red;z-index: 1;}.xionger {background-color: green;left: 50px;top: 50px;z-index: 2;}.qiangge {background-color:blue;left: 100px;top: 100px;}</style>
</head>
<body><div class="box xiongda">熊大</div><div class="box xionger">熊二</div><div class="box qiangge">光头强</div>
</body>
</html>

4. 定位(position)的拓展

4.1 绝对定位的盒子居中

注意：加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。
但是可以通过以下计算方法实现水平和垂直居中，可以按照下图的方法：

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；

margin-left: -100px;：让盒子向左移动自身宽度的一半。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>绝对定位水平垂直居中</title><style>.box {position: absolute;/* 1. left 走 50%  父容器宽度的一半 */left: 50%;/* 2. margin 负值 往左边走 自己盒子宽度的一半 */margin-left: -100px;top: 50%;margin-top: -100px;width: 200px;height: 200px;background-color: pink;/* margin: auto; */}</style>
</head>
<body><div class="box"></div>
</body>
</html>

4.2 定位特殊特性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

前面我们讲过， display 是显示模式，可以改变显示模式有以下方式:

可以用inline-block 转换为行内块

可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）

绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

4.3 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。（我们以前是用padding border overflow解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

4.4 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

5. 综合案例 - 淘宝轮播图(重点)

5.1 效果图

5.2 布局分析

5.3 步骤

大盒子我们类名为： tb-promo 淘宝广告

里面先放一张图片。

左右两个按钮用链接就好了。左箭头 prev 右箭头 next

左按钮样式（border-radius：左上，右上，右下，左下），

右按钮定位，提取左右按钮共同的样式代码（并集选择器）

底侧小圆点ul 继续做。类名为 promo-nav

中间长方形椭圆 ul的定位（水平居中，离底部15px）

长方形需要五个小圆点，ul无序列表，li浮动，椭圆中小圆点的样式

5.4 知识点：圆角矩形设置4个角

圆角矩形可以为4个角分别设置圆度，但是是有顺序的

border-top-left-radius:20px;

border-top-right-radius:20px;

border-bottom-right-radius:20px;

border-bottom-left-radius:20px;

如果4个角，数值相同

border-radius: 15px;

里面数值不同，我们也可以按照简写的形式，具体格式如下:

border-radius: 左上角右上角右下角左下角;

还是遵循的顺时针。

5.5 代码参考

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>淘宝轮播图做法</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.tb-promo {position: relative;width: 520px;height: 280px;background-color: pink;margin: 100px auto;}.tb-promo img {width: 520px;height: 280px;}/* 并集选择器可以集体声明相同的样式 */.prev,.next {position: absolute;/* 绝对定位的盒子垂直居中 */top: 50%;margin-top: -15px;/* 加了绝对定位的盒子可以直接设置高度和宽度 */width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;}.prev {left: 0;/* border-radius: 15px; */border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {/* 如果一个盒子既有left属性也有right属性，则默认会执行 left属性 同理  top  bottom  会执行 top */right: 0;/* border-radius: 15px; */border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;/* background-color: pink; */background: rgba(255,255,255, .3);border-radius: 7px;}.promo-nav li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;}/* 不要忘记选择器权重的问题 */.promo-nav .selected {background-color: #ff5000;}</style>
</head><body><div class="tb-promo"><img src="images/tb.jpg" alt=""><!-- 左侧按钮箭头 --><a href="#" class="prev"> &lt; </a><!-- 右侧按钮箭头 --><a href="#" class="next"> &gt; </a><!-- 小圆点 --><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

6. 网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

6.1. 标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

6.2. 浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

6.3. 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

7. 元素的显示与隐藏

目的（本质）

让一个元素在页面中消失或者显示出来

场景

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

7.1. display 显示（重点）

display 设置或检索对象是否及如何显示。

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： display 隐藏元素后，不再占有原来的位置。

后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：

配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛

7.2. visibility 可见性（了解）

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 　元素可视

visibility：hidden; 　元素隐藏

特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）

如果隐藏元素想要原来位置，就用 visibility：hidden

如果隐藏元素不想要原来位置，就用 display：none (用处更多重点）

7.3. overflow 溢出（重点）

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

实际开发场景：

清除浮动

隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

7.4. 显示与隐藏总结

属性	区别	用途
display 显示（重点）	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility 可见性（了解）	隐藏对象，保留位置	使用较少
overflow 溢出（重点）	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

8 综合案例：土豆网鼠标经过显示遮罩

8.1. 效果图

8.2. 案例目标

1.练习元素的显示与隐藏

2.练习元素的定位

8.3. 核心原理

原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。

遮罩的盒子不占有位置，就需要用绝对定位和 display 配合使用。

8.4. 代码参考

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>仿土豆网显示隐藏遮罩案例</title><style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {/* 隐藏遮罩层 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}/* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */.tudou:hover .mask {/* 而是显示元素 */display: block;}</style>
</head><body><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div><div class="tudou"><div class="mask"></div><img src="images/tudou.jpg" alt=""></div>
</body></html>

05-CSS

今日目标能够说出为什么要用定位能够说出定位的 4 种分类能够说出 4 种定位各自的特点能够说出为什么常用子绝父相布局能够写出淘宝轮播图布局能够说出显示隐藏的 3 种方式以及区别1. 定位(position) 介绍1.1 为什么使用定位我们先来看一个效果，同时思考一下用…...

编程日记 2023/4/17 21:40:50

华为OD机试题，用 Java 解【分奖金】问题

华为Od必看系列华为OD机试全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理已参加机试人员的实战技巧华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典使用说明参加华为od机试，一定要注意不…...

编程日记 2023/4/16 3:54:25

Multisim 14.3 安装教程

1、首先解压Multisim 安装包。 2、解压完成后，双击点进去，找到setup这个文件，点进去。 3、找到setup文件里面的install.exe文件，并鼠标右键 “找到以管理员身份运行”。 4、选择“我接受上述许可协议”，点击下一步。 …...

编程日记 2023/4/17 21:40:01

06-Oracle表空间与用户管理（表空间，用户，备份与恢复，导入导出数据）

本讲主要内容： 1.表空间管理：表空间的作用，创建，修改，删除及管理； 2.用户管理：创建用户，修改用户，删除用户，修改密码，解锁； 3.用户…...

编程日记 2023/4/15 16:52:36

XSS攻击防御

XSS攻击防御XSS Filter过滤方法输入验证数据净化输出编码过滤方法Web安全编码规范XSS Filter XSS Filter的作用是通过正则的方式对用户（客户端）请求的参数做脚本的过滤，从而达到防范XSS攻击的效果。 XSS Filter作为防御跨站攻击的主要手段之…...

编程日记 2023/4/16 3:54:12

敏捷开发还需要PRD吗

一、PRD有什么用 prd提升与RD或者未来接手人的沟通效率二、为什么会有PRD 首先来说说为什么会有PRD文档。 1、稍微大一点的团队产品经理未必能向每个人传达产品需求，这就需要有一个文档的形式来向项目的所有成员来传达需求，这就是文档的来源。 2、由…...

编程日记 2023/4/15 16:52:28

完整教程：使用Spring Boot实现大文件断点续传及文件校验

一、简介随着互联网的快速发展，大文件的传输成为了互联网应用的重要组成部分。然而，由于网络不稳定等因素的影响，大文件的传输经常会出现中断的情况，这时需要重新传输，导致传输效率低下。为了解决这个问题&#xff…...

编程日记 2023/4/15 16:52:18

数位dp-- 数字游戏

题目思路也是一道比较典型的数位dp的问题，关键的思想跟我上一篇博客很像， 首先把区间值变成[1,Y]-[1,X-1]的值，然后单独计算得到结果。总的来说就是把这个数的每一位都单独拿出来，然后根据选0-an-1和选**an**两种方案单独计算&…...

编程日记 2023/4/15 16:52:09

在jar包所在目录 vim start.sh | reload.sh | stop.sh输入以下命令然后保存，进行授权 1.启动 nohup java -jar -Dfile.encodingutf-8 IntegrationFrame-sso-1.0.0-SNAPSHOT.jar & echo "started"2.重启 pid$(ps -ef|grep IntegrationFrame-sso-1.…...

编程日记 2023/4/15 16:51:58

Pytorch深度学习实战3-8：详解数据可视化组件TensorBoard安装与使用

目录1 什么是Tensorboard？2 Tensorboard安装3 Tensorboard可视化流程4 Tensorboard可视化实例4.1 常量可视化4.2 特征图可视化1 什么是Tensorboard？ 在深度学习领域，网络内部如同黑箱，其中包含大量的连接参数，这给人工…...

编程日记 2023/4/15 16:51:50

华为OD机试 - 旋转骰子（C 语言解题）【独家】

最近更新的博客华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南）华为od机试，独家整理已参加机试人员的实战技巧文章目录使用说明本期题目：旋转骰子…...

编程日记 2023/4/15 16:51:37

如何做SpringBoot单元测试？

前言单元测试（unit testing），是指对项目中的最⼩可测试单元进⾏检查和验证的过程就叫单元测试，对于Java来说或者是在SpringBoot项目中，最小的可测试单元就是一个方法。做单元测试就是为了证明某段代码的执⾏结果是否符…...

编程日记 2023/4/14 23:52:46

ZZULI训练: 数组和字符串专题

ZZULI训练:数组和字符串专题ZZULI训练: 数组和字符串专题ZZULI训练:数组和字符串专题部分多实例没写循环多次是因为在main里面循环了, 你们写的时候要加上只提供大概思路和核心代码建议多尝试一下c, 并没有想象的那么难 7-1 个位数统计可以开个数组来存一下每个数组出现的…...

编程日记 2023/4/14 23:52:36

ElasticSearch如何解决深分页问题？

文章目录前言From/Size参数Query阶段Fetch阶段深度分页问题Scroll遍历数据基本使用遍历优缺点缺点：优点：」Scroll Scan基本使用Scroll Scan与Scroll的区别Sliced ScrollSearch After基本使用基本原理优缺点总结ES7版本变...

编程日记 2023/4/14 23:52:29

JDK8新特性宝典

JDK8新特性 Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机，Java 仍是企业和开发人员的首选开发平台课程内容的介绍了解Java发展史Lambda表达式…...

编程日记 2023/4/14 23:52:17

【C++】关于C++模板的分离编译问题

文章目录1.阐述模板的实例化和重复定义问题2.分离编译可能出现的问题3.解决方法将函数模板的定义放到头文件中模板定义的位置显式实例化模板总结1.阐述模板的实例化和重复定义问题 C模板是一种非常强大的工具，可以为我们提供通用的代码实现方式。然鹅，在…...

编程日记 2023/4/14 23:52:06

小应用记账本-第2章-数据库设计

小应用记账本-第2章-数据库设计在上一章《小应用记账本-第1章-需求分析》已经罗列了我们需要的功能，因为很简单，所以这一章就来设计数据库吧。 Account表：账户表字段名类型说明取值idint账户idaccount_namevarchar账户名称remaining_sumd…...

编程日记 2023/4/14 23:51:57

Spring Boot+Vue前后端分离项目练习06之网盘项目创建vue项目

1.安装环境构建vue项目，需要提前安装相应的环境，这里主要就是node，npm和Vue CLl。 #1、安装nodejs brew install nodejs #2、再执行下面命令来安装npm(npm是开发nodejs时所用的依赖库) brew install npm #3、安装vue cli npm install -g v…...

编程日记 2023/4/14 1:50:22

Python - 单元测试

python-单元测试1 Unittest2 Pytest3 两者区别断言方面用例执行编写规则前后置操作setUp, setUpclass, setUpmodule 区别4 实战操作unittest:pytest:1 Unittest unittest属于python的内置框架，支持多种自动化测试用例的编写，以及支持用例前置条件和后置…...

编程日记 2023/4/14 23:51:49

特权级那些事儿-实模式下分段机制首次出现的原因

前言： 操作系统的特权级模块在整个操作系统的学习中应该算的上是最难啃的了，提到特权级就要绕不开保护模式下的分段机制；如果想要彻底弄明白就要对比实模式下的分段机制有什么缺陷。这就衍生出很多问题如：什么是实模式&#xff1f…...

编程日记 2023/4/14 23:51:39

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言生活的美好，总是藏在那些你咬牙坚持的日子里。硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。驱动 OLED 屏幕的 IIC 总线数据传输格式示意图 …...

编程新知 2025/12/9 3:19:35

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决问题背景在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...

编程新知 2025/12/26 5:00:37

管理学院权限管理系统开发总结

文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...

编程新知 2025/10/23 14:10:35

Linux离线（zip方式）安装docker

目录基础信息操作系统信息docker信息安装实例安装步骤示例遇到的问题问题1：修改默认工作路径启动失败问题2 找不到对应组基础信息操作系统信息 OS版本：CentOS 7 64位内核版本：3.10.0 相关命令： uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/12/25 20:19:31

go 里面的指针

指针在 Go 中，指针（pointer）是一个变量的内存地址，就像 C 语言那样： a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10，通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

编程新知 2025/8/18 12:09:07

深度解析：etcd 在 Milvus 向量数据库中的关键作用

目录 🚀 深度解析：etcd 在 Milvus 向量数据库中的关键作用 💡 什么是 etcd？ 🧠 Milvus 架构简介 📦 etcd 在 Milvus 中的核心作用 🔧 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...

编程新知 2025/10/31 3:16:51

网页端 js 读取发票里的二维码信息（图片和PDF格式）

起因为了实现在报销流程中，发票不能重用的限制，发票上传后，希望能读出发票号，并记录发票号已用，下次不再可用于报销。基于上面的需求，研究了OCR 的方式和读PDF的方式，实际是可行的&#xff…...

编程新知 2025/12/26 16:25:54

Java多线程实现之Runnable接口深度解析

Java多线程实现之Runnable接口深度解析一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口三、Runnabl…...

编程新知 2025/9/15 15:07:19

Ray框架：分布式AI训练与调参实践

Ray框架：分布式AI训练与调参实践系统化学习人工智能网站（收藏）：https://www.captainbed.cn/flu 文章目录 Ray框架：分布式AI训练与调参实践摘要引言框架架构解析1. 核心组件设计2. 关键技术实现2.1 动态资源调度2.2 …...

编程新知 2025/12/27 10:19:42