前端中常用的单位度量(px,rpx,rem,em,vw,vh)+图片自适应
文章目录
- 前端中常用的单位度量
- 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单位非常有用。例如,设计一个单页网站,首页通常希望背景图或者背景色能够铺满整个屏幕。此时,可以将
- 分屏布局
- 当需要将页面划分为不同比例的部分时,vw和vh可以很好地实现这个目标。比如,要创建一个具有固定比例侧边栏和内容区域的网页布局。可以将侧边栏的宽度设置为
30vw
,内容区域的宽度设置为70vw
。在垂直方向上,如果希望有一个固定高度的头部(如导航栏)和一个自适应剩余高度的内容区,可以将导航栏的高度设置为20vh
,内容区的高度设置为80vh
。这种布局方式能够在不同屏幕尺寸的设备上(如桌面显示器、笔记本电脑、平板电脑和手机)保持各部分的比例相对稳定。
- 当需要将页面划分为不同比例的部分时,vw和vh可以很好地实现这个目标。比如,要创建一个具有固定比例侧边栏和内容区域的网页布局。可以将侧边栏的宽度设置为
- 全屏模块布局
- 响应式图片和视频展示
- 图片展示
- 在展示大型图片(如产品图片、画廊图片等)时,为了让图片在不同设备上都能有较好的展示效果,可以使用vw和vh单位来控制图片的尺寸。例如,将图片的最大宽度设置为
100vw
,这样图片就不会超出屏幕宽度,避免用户需要水平滚动来查看完整的图片。如果希望图片在高度上也能自适应,可以将其高度设置为与宽度成一定比例,例如,设置高度为70vw
(假设希望图片的宽高比为10:7),这样图片就能根据屏幕宽度自动调整大小,并且保持合适的比例。
- 在展示大型图片(如产品图片、画廊图片等)时,为了让图片在不同设备上都能有较好的展示效果,可以使用vw和vh单位来控制图片的尺寸。例如,将图片的最大宽度设置为
- 视频播放
- 对于视频播放区域,同样可以使用vw和vh来实现自适应。比如,在一个在线课程网站或者视频分享平台上,将视频播放器的宽度设置为
90vw
,高度设置为50vh
,这样视频播放器能够在不同设备上占据合适的屏幕空间,提供良好的观看体验。而且,当用户旋转设备时,视频播放器的尺寸也能根据新的视口尺寸自动调整。
- 对于视频播放区域,同样可以使用vw和vh来实现自适应。比如,在一个在线课程网站或者视频分享平台上,将视频播放器的宽度设置为
- 图片展示
- 移动应用和小程序布局(部分情况)
- 在一些基于WebView的移动应用或者小程序开发中,如果希望界面能够更好地适配设备屏幕,vw和vh单位也可以发挥作用。例如,在一个混合式移动应用的某个页面中,要设计一个信息展示卡片,卡片的宽度可以设置为
80vw
,高度根据内容和设计需求(如设置为40vh
)来确定,这样卡片在不同尺寸的手机屏幕上都能有合适的大小,并且布局相对稳定。不过需要注意的是,在移动原生应用开发中,可能会有更适合的布局方式和单位,但在某些特定场景下结合vw和vh可以提供额外的布局灵活性。
- 在一些基于WebView的移动应用或者小程序开发中,如果希望界面能够更好地适配设备屏幕,vw和vh单位也可以发挥作用。例如,在一个混合式移动应用的某个页面中,要设计一个信息展示卡片,卡片的宽度可以设置为
- 数据可视化和图表展示
- 在数据可视化领域,例如制作柱状图、折线图、饼图等图表时,vw和vh单位有助于图表在不同设备上的适配。如果希望图表能够自适应屏幕大小,可以将图表的容器(如
div
元素)的宽度设置为90vw
,高度设置为70vh
。这样,无论是在大屏幕的监控显示器还是小屏幕的移动设备上,图表都能根据视口大小自动调整尺寸,保证数据能够清晰地展示,同时也不会因为尺寸问题而导致布局混乱。
- 在数据可视化领域,例如制作柱状图、折线图、饼图等图表时,vw和vh单位有助于图表在不同设备上的适配。如果希望图表能够自适应屏幕大小,可以将图表的容器(如
px/rem/em 之间的转换关系
- px与rem的转换关系
- 基本原理:rem是相对于根元素(html)字体大小来计算的单位。假设根元素(html)的字体大小设置为 F F Fpx,那么 1 1 1rem = F F Fpx。例如,如果根元素字体大小是 16 16 16px,那么 1 1 1rem就等于 16 16 16px。
- 转换公式:若要将px转换为rem,公式为 r e m = p x 根元素字体大小( p x ) rem = \frac{px}{根元素字体大小(px)} rem=根元素字体大小(px)px。例如,一个元素的宽度是 32 32 32px,根元素字体大小为 16 16 16px,那么这个元素的宽度用rem表示就是 32 ÷ 16 = 2 32\div16 = 2 32÷16=2rem。反之,若要将rem转换为px,公式为 p x = r e m × 根元素字体大小( p x ) px = rem\times根元素字体大小(px) px=rem×根元素字体大小(px)。
- px与em的转换关系
- 基本原理:em是相对于父元素字体大小来计算的单位。设父元素字体大小为 P P Ppx,那么对于该父元素下的子元素, 1 1 1em = P P Ppx。例如,父元素字体大小为 12 12 12px,那么子元素的 1 1 1em就是 12 12 12px。
- 转换公式:若要将px转换为em,公式为 e m = p x 父元素字体大小( p x ) em=\frac{px}{父元素字体大小(px)} em=父元素字体大小(px)px。例如,一个元素的字体大小是 18 18 18px,其父元素字体大小为 12 12 12px,那么这个元素的字体大小用em表示就是 18 ÷ 12 = 1.5 18\div12 = 1.5 18÷12=1.5em。反过来,若要将em转换为px,公式为 p x = e m × 父元素字体大小( p x ) px = em\times父元素字体大小(px) px=em×父元素字体大小(px)。
- em与rem的转换关系(复杂情况)
- 没有嵌套关系的简单情况:如果元素没有嵌套,或者所有元素的父元素字体大小都和根元素字体大小相同,那么em和rem可以简单地进行转换。例如,根元素(html)字体大小为 16 16 16px,此时 1 1 1rem = 1 1 1em。
- 嵌套情况下:假设根元素字体大小为 F F Fpx,某元素的父元素字体大小为 P P Ppx。该元素用em表示的尺寸为 E E Eem,转换为rem的公式为 r e m = E × P F rem=\frac{E\times P}{F} rem=FE×P。例如,根元素字体大小为 16 16 16px,一个元素的父元素字体大小为 12 12 12px,这个元素的字体大小为 1.5 1.5 1.5em,转换为rem就是 1.5 × 12 16 = 1.125 \frac{1.5\times12}{16}=1.125 161.5×12=1.125rem。
项目中的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 × 16 = 32 2\times16 = 32 2×16=32)。这种简单的倍数关系方便了开发者在设计网页布局和字体大小时进行快速的换算和调整。
- 响应式设计的灵活性
- 在响应式网页设计中,以
16px
作为根元素font - size
的起始值,能够方便地通过媒体查询(@media
)来调整字体大小。例如,当屏幕尺寸变小(如从桌面端切换到移动端)时,可以通过媒体查询将根元素font - size
按比例减小,如设置为12px
或10px
。基于rem单位的其他元素尺寸和字体大小也会相应地按比例缩小,从而实现了网页在不同设备上的自适应布局,同时保持了相对合理的文字显示效果。
- 在响应式网页设计中,以
- 与其他单位的兼容性
- 在和其他单位(如em)结合使用时,如果根元素
font - size
为16px
,可以更好地协调不同单位之间的关系。因为em是相对于父元素字体大小的单位,而在没有特别设置父元素字体大小的情况下,很多元素会继承根元素的字体大小特性。这样,在使用rem和em进行布局和字体大小设置时,可以更容易地理解和控制它们之间的相互作用,减少因为单位换算混乱而导致的布局问题。
- 在和其他单位(如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&…...

STM32之一种双通路CAN总线消息备份冗余处理方法(十三)
STM32F407 系列文章 - Dual-CANBus-ProMethod(十三) 目录 前言 一、现状分析 二、解决思路 1.应用场景网络结构图 2.数据发送流程 3.数据接收流程 4.用到的模块 1.CAN网络速率及时间片分配 2.CAN网络消息ID组成 3.设备节点定义 4.数据格式说明…...

从零开始:使用VSCode搭建Python数据科学开发环境
引言 在数据科学领域,一个高效、稳定的开发环境是成功的关键。本文将详细介绍如何使用Visual Studio Code搭建一个完整的Python数据科学开发环境。通过本指南,您将学会: 安装和配置VSCode,包括基本设置和快捷键配置设置Python开…...
C#语言的字符串处理
C#语言的字符串处理 引言 在现代编程中,字符串处理是一项重要的技能,几乎在所有编程语言中都有应用。C#语言作为一种强类型的、面向对象的编程语言,提供了丰富的字符串处理功能。这使得开发人员能够方便地进行文本操作,比如字符…...

《安富莱嵌入式周报》第348期:开源低功耗测试仪,开源创意万用表,续航100-300小时,开源PCB电机,自制shell和网络协议栈,开源水培自动化系统
周报汇总地址:嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版: https://www.bilibili.com/video/BV1Tzr9Y3EQ7/ 《安富莱嵌入式周报》第348期:开源低功…...
npm发布流程说明
一、进入要发布的项目根目录,初始化为npm包 npm initname:最重要的字段之一,项目名称(少于214个字节)。没有name和version不能进行安装; version:最重要的字段之一,项目版本。没有n…...
缓存-文章目录
关于缓存系列文章: 缓存学习总结1(缓存分类) 缓存学习总结2(服务器本地缓存) 缓存学习总结3(服务器内存缓存)推荐使用 缓存学习总结4(分布式缓存) 关于redis系列文章…...
LeetCode 3297.统计重新排列后包含另一个字符串的子字符串数目 I:滑动窗口
【LetMeFly】3297.统计重新排列后包含另一个字符串的子字符串数目 I:滑动窗口 力扣题目链接:https://leetcode.cn/problems/count-substrings-that-can-be-rearranged-to-contain-a-string-i/ 给你两个字符串 word1 和 word2 。 如果一个字符串 x 重新…...
如何在 Ubuntu 24.04 上安装 Memcached 服务器教程
简介 Memcached 是一个高性能、分布式的内存缓存系统,旨在通过减少数据库负载来加速动态 Web 应用程序。它通过将数据和对象缓存在 RAM 中来实现这一点,从而最大限度地减少了从数据库或其他慢速存储层重复获取数据的需要。 本教程的目标是手把手教你如…...
《深度学习模型在鸿蒙分布式框架下的跨设备高效之旅》
在人工智能领域,深度学习模型的训练与推理通常需要强大的计算资源和大量的数据支持。而鸿蒙系统的分布式框架为解决这一问题提供了新的思路和方法,使得深度学习模型能够在多个设备之间实现高效的训练与推理。 鸿蒙分布式框架概述 鸿蒙系统是一款面向万…...
[python3]Excel解析库-xlutils
xlutils 是一组用于处理 Excel 文件的 Python 库,它实际上是 xlrd 和 xlwt 的扩展,提供了额外的功能来操作 Excel 文件。xlutils 主要由三个部分组成:xlutils.copy、xlutils.filter 和 xlutils.view,它们分别用于复制和修改现有 E…...
Springboot Bean创建流程、三种Bean注入方式(构造器注入、字段注入、setter注入)、循坏依赖问题
文章目录 1 Bean 创建流程1.1 Bean的扫描注册1.2 创建Bean的顺序 2 三种Bean注入方式2.1 构造器注入 | Constructor Injection(推荐)2.2 字段注入 | Field Injection(常用)2.3 方法注入 | Setter Injection2.4 三种方式注入顺序 3…...

mybatisX插件的使用,以及打包成配置
装mybatisX插件; idea连接数据库; 点击mybatisx-generator,设置自己装mybatisX插件; idea连接数据库; 点击mybatisx-generator,设置自己要的包和类; 如果要把自己的配置设置成一个自定义模板&a…...

【初阶数据结构】线性表之单链表
文章目录 前言 一、单链表的概念与结构 1.概念 2.结点 3.性质 二、实现单链表 1.结构的定义 2.链表的打印和结点的申请 3.单链表的尾插和头插 4.单链表的尾删和头删 5.单链表的查找 6.指定位置之前插入数据和指定位置之后插入数据 7.删除pos结点和删除pos之后的结…...

CentOS7通过yum安装JDK
CentOS7通过yum安装JDK 1、卸载自带的JDK 查看已安装的JDK rpm -qa | grep java删除已安装的JDK yum -y remove java-1.8.0-openjdk*验证是否删除成功 查不到版本信息则已删除成功 java -version2、安装JDK sudo yum install java-1.8.0-openjdk java-1.8.0-openjdk-deve…...
c# 常见的几种取整场景
软件取整,通常指的是在计算机软件中对数值进行取整操作,即将一个浮点数或小数转换为整数,同时确定如何处理小数部分。取整操作在编程和数学计算中非常常见,不同的取整方法适用于不同的场景。 常见的取整方法 向零取整(…...

数据库回滚:大祸临头时
原文地址 什么是数据库回滚? 数据库技术中,回滚是通过撤销对数据库所做的一项或多项更改,将数据库返回到先前状态的操作。它是维护数据完整性和从错误中恢复的重要机制。 什么时候需要数据库回滚? 数据库回滚在以下几个场景中很…...

【GoLang】两个字符串如何比较大小?以及字典顺序的比较规则
在 Go 语言中,字符串的比较是基于字典顺序进行的。 字典顺序的比较规则: 比较两个字符串从左到右逐个字符的Unicode码点值, 若比较结果不相等则将此结果作为字符串大小的结果, 若比较结果相等则比较下一位, 若其中一个…...

5G学习笔记之SNPN系列之UE入网和远程配置
参考:3GPP 23.501 5.30.2.10 Onboarding of UEs for SNPNs 小小协议搬运工 目录 0. NPN系列 1. 概述 2. SNPN作为ONN 2.1 DCS参与的入网主鉴权 2.2 DCS不参与的入网主鉴权 2.3 UE入网 3. PLMN作为ONN 4. 远程配置 0. NPN系列 1. NPN概述 2. NPN R18 3. 【SNPN系列】…...

C#版OpenCv常用函数大全
OpenCvSharp 是 OpenCV 的NET封装,提供了丰富的图像处理和计算机视觉功能。以下是一些常用函数及其详细说明。 1. 图像读取与显示 Cv2.ImRead 功能:读取图像文件并返回一个 Mat 对象。用法:Mat image Cv2.ImRead("path/to/image.jpg&…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...

centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...

跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...

【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...