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

前端中常用的单位度量（px,rpx,rem,em,vw,vh）+图片自适应

news 来源：原创 2025/5/14 6:53:55

文章目录

- 前端中常用的单位度量
- vw/vh 的场景应用
- px/rem/em 之间的转换关系
- 项目中的rem 应用
- 根元素 font-size 设置为16px 的应用惯例
- 自适应之图片应用
- - 1. 使用 `max-width` 和 `max-height`
  - 2. 使用 `object-fit` 属性
  - 3. 使用 `background-image` 模拟图片展示

前端中常用的单位度量

px（像素）
- 定义：px是pixel的缩写，它是一个绝对单位，是屏幕上能显示的最小物理单位。例如，在显示器上，一个像素点就是一个px。
- 应用场景：
  - 当需要精确控制元素的尺寸，特别是在一些对布局精度要求较高的设计场景中，如图标设计、小型组件（按钮等）的尺寸定义等。例如，设计一个直径为30px的圆形图标，这种情况下px可以很好地满足精确尺寸的要求。
  - 在一些固定布局的网页或者应用中，比如简单的宣传页面，其中的文字大小、图片尺寸等如果不需要根据设备屏幕大小自适应，使用px来定义是比较方便的。
rpx（响应式像素）
- 定义：rpx是微信小程序特有的单位，它可以根据屏幕宽度进行自适应调整。规定屏幕宽度为750rpx，这样在不同尺寸的手机屏幕上，rpx会自动换算成对应的像素值。例如，在iPhone 6中，屏幕宽度为375px，此时1rpx = 0.5px；在iPhone 6 Plus中，屏幕宽度为414px，1rpx的实际像素值会相应变化。
- 应用场景：
  - 主要应用于微信小程序开发。在开发小程序界面时，使用rpx可以让界面在不同型号的手机上保持相对一致的布局效果。比如，设计一个小程序的列表项高度为80rpx，那么不管是在小屏幕手机还是大屏幕手机上，列表项的高度都会根据屏幕宽度自动适配，不会出现布局错乱的情况。
rem（根元素字体大小相对单位）
- 定义：rem是相对于根元素（html）字体大小来计算的单位。例如，如果根元素（html）的字体大小设置为16px，那么1rem = 16px；如果将根元素字体大小设置为20px，1rem就等于20px。
- 应用场景：
  - 常用于网页的响应式布局。通过设置根元素字体大小，并根据rem来定义其他元素的尺寸，可以很方便地实现整个页面的字号和元素大小的整体缩放。例如，在一个网页中，将根元素字体大小设置为10px，然后将标题的字体大小定义为2rem，那么标题的实际字体大小就是20px。当需要调整页面整体字号时，只需要改变根元素的字体大小，所有使用rem定义的元素尺寸都会相应改变。
  - 对于一些需要根据用户设置（如浏览器字体大小设置）来灵活调整布局的网页，rem也是一个很好的选择。
em（相对单位）
- 定义：em是相对于父元素字体大小来计算的单位。如果一个元素的父元素字体大小为16px，那么对于这个元素来说，1em = 16px。它会继承父元素的字体大小属性。
- 应用场景：
  - 在文本排版中，当需要根据上下文的字体大小来设置相对比例的字号时可以使用em。例如，在一个段落中，正文的字体大小为16px（1em），想要设置其中引用部分的字体大小为正文的0.8倍，就可以将引用部分的字体大小设置为0.8em。
  - 对于一些具有嵌套结构的文本内容，em可以方便地实现字号的逐级缩放，使得文本层次更加分明。不过，由于它是相对于父元素的，在复杂的布局中可能会因为多层嵌套而导致计算复杂，需要谨慎使用。
vw（视口宽度百分比单位）
- 定义：vw是viewport width的缩写，表示视口宽度的百分比。1vw等于视口宽度的1%。例如，在一个宽度为1000px的视口中，1vw = 10px。
- 应用场景：
  - 用于创建完全自适应视口宽度的布局。比如，在设计一个全屏的网页轮播图时，可以将轮播图的宽度设置为100vw，这样不管视口宽度如何变化，轮播图都能铺满整个屏幕宽度。
  - 对于一些需要根据屏幕宽度按比例分配空间的模块布局，vw是一个很好的选择。例如，将一个网页的侧边栏宽度设置为30vw，主内容区域宽度设置为70vw，这样在不同屏幕宽度下，两边的区域都能按照比例自适应。
vh（视口高度百分比单位）
- 定义：vh是viewport height的缩写，表示视口高度的百分比。1vh等于视口高度的1%。例如，在一个高度为600px的视口中，1vh = 6px。
- 应用场景：
  - 与vw类似，主要用于自适应视口高度的布局。例如，在设计一个高度自适应的单页应用（SPA）的页面时，可以将页面的各个部分（如导航栏、内容区、页脚等）的高度用vh来定义，使得页面在不同设备的屏幕高度下都能有良好的布局效果。
  - 在一些需要垂直方向自适应的场景，如垂直滚动的长页面中的某些固定高度比例的模块，使用vh可以方便地实现自适应。比如，设置一个视频播放区域的高度为50vh，这样它会始终占据屏幕高度的一半，为用户提供一致的视觉体验。

vw/vh 的场景应用

网页布局设计
- 全屏模块布局
  - 在创建全屏的网页页面时，vw和vh单位非常有用。例如，设计一个单页网站，首页通常希望背景图或者背景色能够铺满整个屏幕。此时，可以将body或相关的容器元素的高度设置为100vh，宽度设置为100vw，这样就能确保无论用户使用何种设备访问，页面都能完全覆盖屏幕，提供沉浸式的视觉体验。
- 分屏布局
  - 当需要将页面划分为不同比例的部分时，vw和vh可以很好地实现这个目标。比如，要创建一个具有固定比例侧边栏和内容区域的网页布局。可以将侧边栏的宽度设置为30vw，内容区域的宽度设置为70vw。在垂直方向上，如果希望有一个固定高度的头部（如导航栏）和一个自适应剩余高度的内容区，可以将导航栏的高度设置为20vh，内容区的高度设置为80vh。这种布局方式能够在不同屏幕尺寸的设备上（如桌面显示器、笔记本电脑、平板电脑和手机）保持各部分的比例相对稳定。
响应式图片和视频展示
- 图片展示
  - 在展示大型图片（如产品图片、画廊图片等）时，为了让图片在不同设备上都能有较好的展示效果，可以使用vw和vh单位来控制图片的尺寸。例如，将图片的最大宽度设置为100vw，这样图片就不会超出屏幕宽度，避免用户需要水平滚动来查看完整的图片。如果希望图片在高度上也能自适应，可以将其高度设置为与宽度成一定比例，例如，设置高度为70vw（假设希望图片的宽高比为10:7），这样图片就能根据屏幕宽度自动调整大小，并且保持合适的比例。
- 视频播放
  - 对于视频播放区域，同样可以使用vw和vh来实现自适应。比如，在一个在线课程网站或者视频分享平台上，将视频播放器的宽度设置为90vw，高度设置为50vh，这样视频播放器能够在不同设备上占据合适的屏幕空间，提供良好的观看体验。而且，当用户旋转设备时，视频播放器的尺寸也能根据新的视口尺寸自动调整。
移动应用和小程序布局（部分情况）
- 在一些基于WebView的移动应用或者小程序开发中，如果希望界面能够更好地适配设备屏幕，vw和vh单位也可以发挥作用。例如，在一个混合式移动应用的某个页面中，要设计一个信息展示卡片，卡片的宽度可以设置为80vw，高度根据内容和设计需求（如设置为40vh）来确定，这样卡片在不同尺寸的手机屏幕上都能有合适的大小，并且布局相对稳定。不过需要注意的是，在移动原生应用开发中，可能会有更适合的布局方式和单位，但在某些特定场景下结合vw和vh可以提供额外的布局灵活性。
数据可视化和图表展示
- 在数据可视化领域，例如制作柱状图、折线图、饼图等图表时，vw和vh单位有助于图表在不同设备上的适配。如果希望图表能够自适应屏幕大小，可以将图表的容器（如div元素）的宽度设置为90vw，高度设置为70vh。这样，无论是在大屏幕的监控显示器还是小屏幕的移动设备上，图表都能根据视口大小自动调整尺寸，保证数据能够清晰地展示，同时也不会因为尺寸问题而导致布局混乱。

px/rem/em 之间的转换关系

px与rem的转换关系
- 基本原理：rem是相对于根元素（html）字体大小来计算的单位。假设根元素（html）的字体大小设置为 $F$ px，那么 $1$ rem = $F$ px。例如，如果根元素字体大小是 $16$ px，那么 $1$ rem就等于 $16$ px。
- 转换公式：若要将px转换为rem，公式为 $\frac{px}{根元素字体大小（px）}$ 。例如，一个元素的宽度是 $32$ px，根元素字体大小为 $16$ px，那么这个元素的宽度用rem表示就是 $32\div16 = 2$ rem。反之，若要将rem转换为px，公式为 $rem\times根元素字体大小（px）$ 。
px与em的转换关系
- 基本原理：em是相对于父元素字体大小来计算的单位。设父元素字体大小为 $P$ px，那么对于该父元素下的子元素， $1$ em = $P$ px。例如，父元素字体大小为 $12$ px，那么子元素的 $1$ em就是 $12$ px。
- 转换公式：若要将px转换为em，公式为 $em=\frac{px}{父元素字体大小（px）}$ 。例如，一个元素的字体大小是 $18$ px，其父元素字体大小为 $12$ px，那么这个元素的字体大小用em表示就是 $18\div12 = 1.5$ em。反过来，若要将em转换为px，公式为 $em\times父元素字体大小（px）$ 。
em与rem的转换关系（复杂情况）
- 没有嵌套关系的简单情况：如果元素没有嵌套，或者所有元素的父元素字体大小都和根元素字体大小相同，那么em和rem可以简单地进行转换。例如，根元素（html）字体大小为 $16$ px，此时 $1$ rem = $1$ em。
- 嵌套情况下：假设根元素字体大小为 $F$ px，某元素的父元素字体大小为 $P$ px。该元素用em表示的尺寸为 $E$ em，转换为rem的公式为 $rem=\frac{E\times P}{F}$ 。例如，根元素字体大小为 $16$ px，一个元素的父元素字体大小为 $12$ px，这个元素的字体大小为 $1.5$ em，转换为rem就是 $\frac{1.5\times12}{16}=1.125$ rem。

项目中的rem 应用

网页字体大小设置
- 整体字号控制
  - 在网页开发中，通过将根元素（html）的字体大小设置为一个相对合理的值（如10px或16px），然后使用rem单位来定义其他元素的字体大小。例如，对于网页中的标题元素h1，可以将其字体大小设置为2rem，如果根元素字体大小为16px，那么h1的字体大小就是32px。这样，当需要调整整个网页的字体大小时，只需改变根元素的字体大小，所有基于rem定义的字体大小都会相应地改变，实现了网页字体大小的整体缩放，方便用户根据自己的喜好或者设备的显示情况（如视力不好的用户可能希望增大字体）进行调整。
- 不同级别标题字号设置
  - 可以根据文档结构和设计需求，使用rem为不同级别的标题设置字号。例如，h1设置为2rem，h2设置为1.6rem，h3设置为1.3rem等，形成一个层次分明的标题字号体系。这样，在不同的页面或者模块中，标题的字号比例关系保持一致，有助于提高网页内容的可读性和视觉层次。
网页布局尺寸定义
- 容器尺寸设定
  - 对于网页中的各种容器元素，如div、section等，使用rem来定义它们的宽度和高度是实现响应式布局的一种有效方式。例如，设计一个内容区域，将其宽度设置为60rem，如果根元素字体大小为10px，那么这个内容区域的宽度就是600px。当根元素字体大小改变时，内容区域的宽度也会随之改变，从而适应不同屏幕尺寸和用户偏好。
- 组件尺寸调整
  - 在网页组件（如按钮、输入框等）的开发中，rem单位可以确保组件在不同的页面环境下保持合适的大小。例如，设计一个按钮，其宽度为1.5rem，高度为0.8rem，按钮内文字大小为0.6rem。这样，按钮的尺寸和文字大小会根据根元素字体大小进行自适应调整，无论是在大屏幕还是小屏幕设备上，按钮的比例和可读性都能得到较好的保证。
响应式网页适配不同设备
- 适配多种屏幕分辨率
  - 随着移动设备的多样化，屏幕分辨率也各不相同。使用rem单位可以方便地让网页在不同分辨率的设备上进行适配。例如，在桌面浏览器上，根元素字体大小可能设置为16px，而在移动设备上，通过媒体查询（@media）可以将根元素字体大小调整为10px。这样，基于rem定义的所有元素尺寸都会相应地在移动设备上变小，实现了网页从桌面到移动设备的自适应转换，避免了在小屏幕设备上出现布局混乱或者元素过大的问题。
- 适配不同的设备方向
  - 当用户旋转设备（如从竖屏变为横屏）时，网页布局也需要相应地调整。通过rem单位和适当的媒体查询，可以根据设备的方向改变根元素的字体大小，进而调整网页中所有元素的尺寸。例如，在竖屏时根元素字体大小为10px，当设备旋转为横屏时，可以将根元素字体大小增加到12px，使得网页中的元素在横屏模式下能够更好地利用屏幕空间，同时保持布局的合理性。

根元素 font-size 设置为16px 的应用惯例

浏览器默认设置的影响
- 大多数浏览器的默认font - size值是16px。这是一种行业惯例，用户在浏览网页时已经习惯了这种默认的文字大小。如果将根元素font - size定义为16px，在没有特别设置其他元素字体大小的情况下，网页的文本呈现会比较符合用户的预期，不需要用户进行额外的缩放操作来正常阅读内容。
计算方便性
- 16px是一个相对容易计算的数值。在进行rem单位和px单位之间的转换时，如果根元素font - size为16px，那么1rem = 16px。例如，将一个元素的字体大小设置为2rem，很容易计算出它的实际字体大小是32px（ $2\times16 = 32$ ）。这种简单的倍数关系方便了开发者在设计网页布局和字体大小时进行快速的换算和调整。
响应式设计的灵活性
- 在响应式网页设计中，以16px作为根元素font - size的起始值，能够方便地通过媒体查询（@media）来调整字体大小。例如，当屏幕尺寸变小（如从桌面端切换到移动端）时，可以通过媒体查询将根元素font - size按比例减小，如设置为12px或10px。基于rem单位的其他元素尺寸和字体大小也会相应地按比例缩小，从而实现了网页在不同设备上的自适应布局，同时保持了相对合理的文字显示效果。
与其他单位的兼容性
- 在和其他单位（如em）结合使用时，如果根元素font - size为16px，可以更好地协调不同单位之间的关系。因为em是相对于父元素字体大小的单位，而在没有特别设置父元素字体大小的情况下，很多元素会继承根元素的字体大小特性。这样，在使用rem和em进行布局和字体大小设置时，可以更容易地理解和控制它们之间的相互作用，减少因为单位换算混乱而导致的布局问题。

自适应之图片应用

要实现图片自适应展示、保证图片显示不变形、等比缩放且居中展示，可以使用CSS来实现。以下是几种常见的方法：

1. 使用 `max-width` 和 `max-height`

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale = 1.0"><style>img {max - width: 100%;max - height: 100%;display: block;margin: 0 auto;}</style>
</head><body><img src="your-image-url.jpg" alt="示例图片">
</body></html>

原理：max - width: 100% 确保图片宽度不会超过其父容器的宽度，max - height: 100% 确保图片高度不会超过其父容器的高度。display: block 将图片转换为块级元素，margin: 0 auto 使图片在水平方向上居中显示。

2. 使用 `object-fit` 属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale = 1.0"><style>.img-container {width: 100%;height: 400px;/* 设置一个固定高度，也可以根据需求调整 */display: flex;justify-content: center;align-items: center;}img {width: 100%;height: 100%;object-fit: contain;}</style>
</head><body><div class="img-container"><img src="your-image-url.jpg" alt="示例图片"></div>
</body></html>

原理：object-fit: contain 会保持图片的纵横比，并将图片缩放到在指定的容器内尽可能大，同时保证图片的完整显示。通过设置父容器（.img-container）的 display: flex，justify-content: center 和 align-items: center，实现图片在父容器内水平和垂直居中。

3. 使用 `background-image` 模拟图片展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale = 1.0"><style>.img - container {width: 100%;height: 400px;background - image: url('your-image-url.jpg');background - size: contain;background - position: center;background - repeat: no - repeat;}</style>
</head><body><div class="img-container"></div>
</body></html>

原理：background-size: contain 使背景图片在保持纵横比的情况下尽可能大，同时完全适应容器。background-position: center 将背景图片在容器内居中显示，background-repeat: no-repeat 确保图片不会重复显示。这种方法适用于不需要对图片添加HTML元素交互（如点击链接等）的场景。

前端中常用的单位度量（px,rpx,rem,em,vw,vh）+图片自适应

文章目录前端中常用的单位度量vw/vh 的场景应用px/rem/em 之间的转换关系项目中的rem 应用根元素 font-size 设置为16px 的应用惯例自适应之图片应用1. 使用 max-width 和 max-height2. 使用 object-fit 属性3. 使用 background-image 模拟图片展示前端中常用的单位度量 px&…...

编程日记 2025/5/14 6:53:55

Attention计算中的各个矩阵的维度都是如何一步步变化的？

在Transformer模型中，各个矩阵的维度变化是一个关键的过程，涉及到输入、编码器、解码器和输出等多个阶段。以下是详细的维度变化过程： 输入阶段输入序列：假设输入序列的长度为seq_len，每个单词或标记通过词嵌入&…...

编程日记 2025/5/14 6:28:07

Golang学习笔记_23——error补充

Golang学习笔记_20——error Golang学习笔记_21——Reader Golang学习笔记_22——Reader示例文章目录 error补充1. 基本错误处理2. 自定义错误3. 错误类型判断3.1 类型断言3.2 类型选择 4. panic && recover 源码 error补充 1. 基本错误处理在Go中，函数…...

编程日记 2025/5/6 20:00:08

DB-Engines Ranking 2025年1月数据库排行

DB-Engines Ranking 2025年1月数据库排行 DB-Engines排名根据数据库管理系统的受欢迎程度进行排名。排名每月更新一次。 2025年1月，共有423个数据库进入排行。排行榜 Oracle Oracle 连续三月稳居榜首，排名稳定。2025 年 1 月分数较上月增 5.03&#x…...

编程日记 2025/5/14 4:40:30

积分与签到设计

积分在交互系统中，可以通过看视频、发评论、点赞、签到等操作获取积分，获取的积分又可以参与排行榜、兑换优惠券等，提高用户使用系统的积极性，实现引流。这些功能在很多项目中都很常见，关于功能的实现我的思路如下。 …...

编程日记 2025/5/13 10:04:34

用 Python 绘制可爱的招财猫

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ 招财猫，也被称为“幸运猫”，是一种象征财富和好运的吉祥物，经常…...

编程日记 2025/5/14 5:24:51

用 HTML5 Canvas 和 JavaScript 实现炫酷跨年烟花特效

一、引言跨年夜，五彩斑斓、绚丽绽放的烟花是最令人期待的视觉盛宴之一。在网页端，我们能否通过技术手段复现这一梦幻场景呢？答案是肯定的。本文将深入剖析一段使用 HTML5 Canvas 和 JavaScript 实现的跨年烟花特效源码，带你领略前端技术创造的惊艳画面。用 HTML5 Canvas…...

编程日记 2025/5/12 9:47:56

什么是数据湖？大数据架构的未来趋势

💖 欢迎来到我的博客！ 非常高兴能在这里与您相遇。在这里，您不仅能获得有趣的技术分享，还能感受到轻松愉快的氛围。无论您是编程新手，还是资深开发者，都能在这里找到属于您的知识宝藏，学习和成长…...

编程日记 2025/5/14 5:44:46

Spring boot接入xxl-job

Spring boot接入xxl-job 导入maven包加入配置增加配置类创建执行器类（写job的业务逻辑）去控制台中配置job 导入maven包 <dependency><groupId>com.xuxueli</groupId><artifactId>xxl-job-core</artifactId><version>…...

编程日记 2025/5/11 22:06:38

Flutter pubspec.yaml 使用方式

Flutter pubspec.yaml 使用方式 pubspec.yaml 是 Flutter 项目中最重要的配置文件之一，用于管理应用的基本信息、依赖项、资源以及构建配置等内容。 1. 基本结构和字段基本信息 name: my_flutter_app # 应用的名称 description: A new Flutter project …...

编程日记 2025/5/13 9:41:42

Elixir语言的学习路线

Elixir语言的学习路线 Elixir是一种动态、通用的编程语言，特别适合用于构建可扩展和维护性强的应用程序。它基于Erlang虚拟机（BEAM），因其高并发性和容错能力而广受欢迎。近年来，Elixir在Web开发（特别是与P…...

编程日记 2025/5/14 6:25:30

看不懂scatter、gather的来

1.torch.scatter 这是out-of-place版本（相对于in-place版本），它会返回一个新的张量。 torch.Tensor.scatter_ 就是in-place版本，它直接修改自身，返回的也是自身 Tensor.scatter_(dim, index, src, *, reduceNone) →…...

编程日记 2025/5/4 15:11:51

系统思考—问题分析

爱因斯坦说过：“如果我有1小时拯救世界，我会花55分钟去确认问题为何，只用5分钟寻找解决方案。” 这个看似简单的道理，却蕴藏着解决复杂问题的智慧。真正的问题，往往隐藏在现象的背后。解决问题的关键，不在…...

编程日记 2025/5/14 5:53:46

【C】编译与链接

在本文章里面，我们讲会讲解C语言程序是如何从我们写的代码一步步变成计算机可以执行的二进制指令，并最终执行的。C语言程序运行主要包括两大步骤 -- 编译和链接，接下来我们就来一一讲解。目录 1 翻译环境和运行环境 2 翻译环境 1&#…...

编程日记 2025/5/7 15:13:25

如何用Python编程实现自动整理XML发票文件

传统手工整理发票耗时费力且易出错，而 XML 格式发票因其结构化、标准化的特点，为实现发票的自动化整理与保存提供了可能。本文将详细探讨用python来编程实现对 XML 格式的发票进行自动整理。一、XML 格式发票的特点结构化数据：XML 格式发票…...

编程日记 2025/5/14 6:22:00

深入探索OceanBase分布式数据库理论：开启数据管理新篇章

《深入探索OceanBase分布式数据库理论：开启数据管理新篇章》在当今数字化转型风起云涌的时代，数据已然成为企业最为宝贵的资产之一。随着数据量呈爆炸式增长、业务场景愈发复杂多元，传统的集中式数据库在应对高并发、海量数据存储与处理时逐…...

编程日记 2025/5/14 5:32:31

如何用VS调试不属于解决方案的EXE和DLL程序-使用PDB和EXE文件-根据exe|pdb|源码文件进行调试分析

文章目录 1.问题2.基本点3.方法步骤3.1.新建一个空的解决方案3.2.构建源码项目3.3.添加pdb文件目录3.4.调试目标exe 4.源码断点 1.问题如果你手里有一个现成的EXE, 以及EXE相关联PDB文件, 还有相关联的CPP文件和H文件. 你如何用VS调试? (当然你可以选择WinDbg.不过这里就讨论…...

编程日记 2025/5/10 20:49:30

2. CSS的元素显示模式

2.1什么是元素显示模式作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的额特点可以更好的布局我们的网页。元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行…...

编程日记 2025/5/14 5:41:12

marktext 开源markdown安装

https://github.com/marktext/marktext 该 markdown 的免费安装， 在mac os 上安装时， 出现无法安装的情况使用如下的命令可以， 可以进行使用 https://github.com/marktext/marktext/issues/2983 This isn’t the recommended command si…...

编程日记 2025/5/3 21:15:06

/src/utils/request.ts：axios 请求封装，适用于需要统一处理请求和响应的场景

文章目录数据结构解释1. 核心功能2. 代码结构分析请求拦截器响应拦截器 3. 改进建议4. 总结 console.log(Intercepted Response:, JSON.stringify(response));{"data": {"code": 0,"msg": "成功","data": {"id":…...

编程日记 2025/5/12 0:41:28

蓝桥杯第十五届研究生组 B题召唤数学精灵

问题描述： 数学家们发现了两种用于召唤强大的数学精灵的仪式，这两种仪式分别被称为累加法仪式 A(n) 和累乘法仪式 B(n)。累加法仪式 A(n) 是将从 1 到 n 的所有数字进行累加求和，即：A(n)12⋯n累乘法仪式 B(n) 则是将从 1 到 n 的所…...

编程日记 2025/5/14 6:31:28

四种编译方式（make、cmake、configure、autogen.sh）

文章目录一、make特征编译步骤（make）样例编译二、cmake特征编译步骤（cmake --> make）样例编译三、configure特征编译步骤（./configure --> make）样例编译四、autogen.sh特征编译步骤（./autogen.sh --> ./configure --> make）样例编译总结一、make 特征 …...

编程日记 2025/5/14 6:13:00

Cursor 实战技巧：好用的提示词插件Cursor Rules

你好啊，见字如面。感谢阅读，期待我们下一次的相遇。最近在小红书发现了有人分享这款Cursor提示词的插件，下面给各位分享下使用教程。简单来说Cursor Rules就是可以为每一个我们自己的项目去配置一个系统级别的提示词，这样在我们…...

编程日记 2025/5/14 6:14:02

mysql事务及隔离机制

mysql总结 mysql事务特性： 原子性（Atomicity）一致性（Consistency）隔离性（Isolation）持久性（Durability） 并发访问数据库造成的问题： 脏读：读到…...

编程日记 2025/5/14 5:51:29

《护网行动与数字时代：如何应对日益复杂的网络威胁？》

什么是护网 1.什么是护网行动护网行动是由公安部牵头组织的网络安全攻防演练活动，旨在评估和提升企事业单位的网络安全防护能力。具体来说，护网行动通过模拟真实的网络攻击场景，组织攻防双方进行对抗演练，以检测企事业单位网…...

编程日记 2025/5/12 4:05:48

1月9日星期四今日早报简报微语报早读

1月9日星期四，农历腊月初十，早报#微语早读。 1、上海排查47家“俄罗斯商品馆”：个别店铺被责令停业，立案调查； 2、西藏定日县已转移受灾群众4.65万人，检测到余震646次； 3、国家发改委&#x…...

编程日记 2025/5/10 23:22:20

科大讯飞前端面试题及参考答案（下）

除了 echarts 还了解其它画图工具吗？除了 Echarts，还有不少优秀的画图工具可供选择使用。 Highcharts：它是一款功能强大且应用广泛的图表绘制工具，支持多种常见的图表类型，像柱状图、折线图、饼图、散点图等，同时也能创建较为复杂的图表，比如仪表盘图表、极坐标图等。H…...

编程日记 2025/5/7 17:28:11

以启动java程序进行示例,其他程序也可按照该方式进行配置 [Unit] DescriptionMy Java Service Afternetwork.target[Service] WorkingDirectory/opt/myapp # 设置你的 jar 文件所在目录 ExecStart/usr/bin/java -jar myapp.jar # 替换为你的 jar 启动命令 Restartalways Re…...

编程日记 2025/5/6 13:00:11

linux-28 文本管理(一）文本查看，cat，tac，more，less，head，tail

之前提到过linux的几个重要哲学思想，使用纯文本文件保存软件的配置信息是其中之一，所以大多数情况下，我们对整个系统的操作，都是通过编辑它的配置文件来完成，那也就意味着，处理文本文件是我们作为系统管理员…...

编程日记 2025/5/12 2:31:17

Springboot3巧妙运用拦截器阻断xss攻击

Springboot3巧妙运用拦截器阻断xss攻击什么是xss跨站脚本攻击类型简单示例解决方法拦截器代码使用demo 什么是xss 人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets&#xff…...

编程日记 2025/5/4 11:22:35

leetcode 2551. 将珠子放入背包中

题目如下数据范围示例题目的意思是将一个长度为n的数组weight(简称w)分成k个小数组,同时计算这些小数组的边界和。设i (0 < i < n - 1) 首先我们假设已经找到最大分数序列即划分的小数组最优令 j1,j2,j3.....jk为这些小数组的左端点(不包括第一个小数组)。则有…...

编程日记 2025/5/10 17:18:51

【Spring】SpringBoot整合ShardingSphere并实现多线程分批插入10000条数据（进行分库分表操作）。

??个人主页：哈__ 期待您的关注目录一、ShardingSphere简介 ?1.Sharding-JDBC 2.Sharding-Proxy? 3.Sharding-Sidecar（TBD）? 二、为什么用到ShardingSphere? 三、数据分片四、SpringBoot整合ShardingSphere 1.创建我们的数据…...

编程日记 2025/5/9 17:22:38

Python中的ast.literal_eval：安全地解析字符串为Python对象

Python中的ast.literal_eval：安全地解析字符串为Python对象什么是ast.literal_eval？为什么说它是“安全”的？ 如何使用ast.literal_eval？示例1：将字符串转换为列表示例2：将字符串转换为字典示例3&#xff…...

编程日记 2025/5/13 21:13:28

前端用json-server来Mock后端返回的数据处理

<html><body><div class"login-container"><h2>登录</h2><div class"login-form"><div class"form-group"><input type"text" id"username" placeholder"请输入用户名&q…...

编程日记 2025/5/10 7:31:10

【linux】文件与目录命令 - mv

文章目录 1. 基本用法2. 常用参数3. 用法举例4. 注意事项 mv 命令用于移动或重命名文件和目录，是 Linux 系统中管理文件的重要工具之一。它既能移动文件到指定路径，也能重命名文件或目录。 1. 基本用法语法： mv [选项] 源文件目标文件 mv…...

编程日记 2025/5/9 9:18:51

OSPF - LSA对照表

LSA的三要素，如何唯一表示一条LSA Type：表示是几类的LSA Link-id：这个比较特殊，不同的LSA的Link-ID不同 Advertising router：谁产生的LSA 常用的就是1、2、3、4、5、7型LSA 点击蓝字跳转LSA详细介绍(持续更新中…...

编程日记 2025/5/10 9:06:50

Mongodb基础sqL

------------------------------------------数据库------------------------------ (2).查看所有数据库 show dbs (3).选择数据库，如果不存在则隐式创建这个数据库 use 数据库名 ------------------------------------------集合------------------------------ …...

编程日记 2025/5/6 0:57:27

uniapp开发u-icon图标不显示问题

uniapp开发图标用u-icon不显示，换成uv-icon就可以了插件市场从这里下载：uv-ui 破釜沉舟之兼容vue32、app、h5、小程序等多端，灵活导入，利剑出击 - DCloud 插件市场组件库看这个：介绍 | 我的资料管理-uv-ui 是全面兼…...

编程日记 2025/5/12 8:16:23

宁德时代2025年Verify入职测评语言理解及数字推理真题SHL题库汇总、考情分析

宁德时代社招Verify入职测评对薪酬有着重要影响，其规定正确率达到80%才能顺利通过测评。这体现了公司对人才专业素养与能力的严格要求，旨在筛选出真正符合岗位需求的优秀人才。测评内容涵盖了专业知识、技能运用、逻辑思维等多方面，只有综合能…...

编程日记 2025/4/29 17:33:45

Spring Data Elasticsearch简介

一、Spring Data Elasticsearch简介 1 SpringData ElasticSearch简介 Elasticsearch是一个实时的分布式搜索和分析引擎。它底层封装了Lucene框架,可以提供分布式多用户的全文搜索服务。 Spring Data ElasticSearch是SpringData技术对ElasticSearch原生API封装之后的产物,它通…...

编程日记 2025/5/6 23:14:46

即插即用，无缝集成各种模型，港科大蚂蚁等发布Edicho：图像编辑一致性最新成果！

文章链接：https://arxiv.org/pdf/2412.21079 项目链接：https://ezioby.github.io/edicho/ 亮点直击显式对应性引导一致性编辑：通过将显式图像对应性融入扩散模型的去噪过程，改进自注意力机制与分类器自由引导（CFG&…...

编程日记 2025/5/11 9:07:39

鸿蒙开发（29）弹性布局 (Flex)

概述弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方…...

编程日记 2025/5/14 2:29:17

华为 Sensor 省电策略调研

华为EMUI 9.0.0.187（C00E57R1P15） 无该功能华为EMUI 9.1.0.321（C00E320R1P1） 之后有sensor管控一、华为 Sensor 省电策略 1. Sensor 类别只配置非唤醒类Sensor 2. 手机静止情况，应用不可见时达到1分钟&#xff0…...

编程日记 2025/5/5 3:45:40

Kotlin语言的网络编程

Kotlin语言的网络编程 Kotlin作为一种现代的编程语言，其简洁、安全和高效的特性使得在开发各种应用时得到广泛认可。尤其是在网络编程方面，Kotlin凭借其与Java的高度兼容性以及丰富的库支持，使得网络操作变得更加简单易用。本文将详细探讨Ko…...

编程日记 2025/5/13 17:16:48

redis：安装部署、升级以及失败回退

安装部署一、准备工作 1. 检查系统要求确保你的服务器满足 Redis 的基本要求：操作系统：支持的 Linux 发行版（如 Ubuntu, CentOS）内存：至少 4GB（根据实际应用需求调整）CPU：单核或多核 CPU磁盘空间：足够的磁盘空间用于数据存储和日志记录2. 更新系统软件包在开始…...

编程日记 2025/5/13 17:46:01

3. ML机器学习

1.人工智能与机器学习的关系机器学习是人工智能的一个重要分支，是人工智能的一个子集。它无需显式编程，而是通过数据和算法使机器能够自动学习和改进，从而实现智能行为。机器学习依赖于算法来识别数据中的模式，并通过这些模式做出…...

编程日记 2025/5/6 10:56:12

在高德地图上加载3DTilesLayer图层模型/天地瓦片

1. 引入必要的库 Three.js：一个用于创建和显示3D图形的JavaScript库。vuemap/three-layer：一个Vue插件，它允许你在高德地图中添加Three.js图层。vuemap/layer-3dtiles：一个用于处理3D Tiles格式数据的Vue插件，可以用来…...

编程日记 2025/5/8 8:07:37

用户使用LLM模型都在干什么？

Anthropic 对用户与 Claude 3.5 Sonnet 的大量匿名对话展开分析，主要发现及相关情况如下： 使用用途分布软件开发主导：在各类使用场景中，软件开发占比最高，其中编码占 Claude 对话的 15% - 25%，网页和移动应…...

编程日记 2025/4/30 20:23:12

2 抽象工厂（Abstract Factory）模式

抽象工厂模式 1.1 分类 （对象）创建型 1.2 提出问题家具店里有沙发、椅子、茶几等产品。产品有不同风格，如现代、北欧、工业。希望确保客户收到的产品风格统一，并可以方便地添加新产品和风格。 1.3 解决方案提供一个创建一…...

编程日记 2025/5/13 15:14:26

数据结构-串

串的实现在C语言中所使用的字符串就是串的数据类型的一种。串的存储结构定长顺序存储表示类似于线性表的顺序存储结构，用一组连续的存储单元存储串值的字符序列。 #define MAXLEN 255 //预定义最大串长为255 typedef struct SString {char ch[MAXLEN]; …...

编程日记 2025/5/14 1:58:51