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

CSS高级技巧及新增属性

article 2025/6/9 6:57:24

CSS高级技巧及新增属性

@jarringslee

文章目录

- CSS高级技巧及新增属性
- - 精灵图 Sprite
  - 字体图标 iconfont
  - CSS几何图形的写法
  - 更改鼠标样式
  - 更改表单轮廓
  - 取消文本域的拖拽
  - 行内块元素的垂直居中对齐
  - 溢出文字处理
- CSS布局技巧
- CSS5新增内容及其他属性
- - 新增选择器
  - 新增基础属性及其他属性
  - calc函数
  - transition过渡属性
  - 2D转换效果
  - 动画效果
  - 3D转换效果

精灵图 Sprite

为减少 HTTP 请求（减少服务器接受和发送请求的次数），加快页面加载速度，在部分场景下优化图片切换效果，出现CSS精灵技术（也称CSS Sprites、CSS雪碧）

**核心原理：**将网页中的一些小背景图整合到一张大图中，这样服务器只要一次请求接可以了。

精灵图的使用

将所有背景小图标整合到一张大图中，使用时，利用背景属性background-position移动图片位置，使需要的小图标能在特定的位置显示出来。

移动的距离就是目标图标的x和y坐标。
因为一般情况下都是向左和上移动，所以值一般为负值。
使用精灵图时需要精确测量每个小图标的大小和位置。

代码示例：

.box{width: 60px;height: 60px;   /*计算好小图标的宽和高*/margin: 100px auto;    /*小图标需要被放在父元素的什么位置*/background: url(#);  background-position: -180px -20px;    /*精灵图需要移动的距离*/最后两步（背景图属性）可以简写：background: url(#) -180px -20px;
}

字体图标 iconfont

网页中一些文字或者按钮前面一般会跟一个小图标（如定位的大头针、照片的小相机等）

使用精灵图的弊端：

图片文件还是比较大的；
图片本身放大或者缩小会是真；
图片制作完毕后想要更换会比较复杂。

使用字体图标的优点：

轻量级：图标字体内存比图片小，一旦字体加载出来了，图标马上就会被渲染出来，减少服务器请求；
灵活性：其本质为文字，可随意改变颜色、大小等属性；
**兼容性：**几乎支持所有浏览器。

如果碰到结构样式比较复杂的图标，还是得用精灵图。

使用字体图标：

可以直接从网上下载到网页常见的小图标；

常见字体库：
- 国外的：http://icomoon.io/
- 阿里巴巴的：https://www.iconfont.cn/
引入到html界面中；

选好图标下载之后进行解压，解压后选择文件中的font文件夹（内包含.ttf、.woff等四种字体格式，兼容大多数浏览器）并将其复制到html文件的根目录中（与html文件平级）。
可以添加新的图标

这玩意应该考核不会考吧，等我后面有时间了再慢慢看看。

CSS几何图形的写法

绘制基础三角形

设置一个宽和高都为0的盒子并设置实线边框并设置透明色，随后给其中一个边的边框添加颜色。

.box {width: 0;height: 0;    /*宽和高都为0*/line-height:0;font-size:0;    /*这两行解决兼容问题*/border: 50px soild transparent;border-left-color:blue;
}

给盒子添加外接小三角形

绘制好一个普通盒子，再绘制好小三角形，用定位的方式将小三角形拼接在盒子上。

在方块右上方拼一个小三角形：
<style>.box{position: relative;width: 120px;height: 200px;background-color: pink;}.box span{position: absolute;;right:15px;top:-10px;width: 0;height: 0;line-height: 0;font-size: 0;border: 5px soild transparent;border-bottom-color: pink;}
</style>
<html><div class="box"><span></span></div>
</html>

直角三角形

只给盒子的两个相邻边上色，其它两边透明，就能得到一个直角三角形。例如左下直角：

/* 左下直角三角形 */
.right-angle {width: 0;height: 0;line-height: 0;font-size: 0;border: 80px solid transparent;       /* 四边都先设为透明 */border-right-color: #4CAF50;           /* 右边上色 */border-top-color: #4CAF50;             /* 上边也上色 *//* 上色的两条边夹角就是 90° */
}

如果想要其它直角位置，只需把上色的两条边换到对应方向即可，例如右上直角：

/* 右上直角三角形 */
.right-angle-topright {width: 0;height: 0;line-height: 0;font-size: 0;border: 80px solid transparent;border-left-color: #F44336;  /* 左边上色 */border-bottom-color: #F44336;/* 下边上色 */
}

非等腰直角三角形

任意相邻两个边框给不一样的值，其余两个边框为0，只保留其中一个赋了值的边框的颜色，另外一个边框透明。

.angle{width: 0;height: 0;    line-height:0;font-size:0;/*保留两个边的值且不相同*/border-width: 100px 50px 0 0;/*实线*/border-style: solid;/*只给一个边上色*/  border-color: transparent red transparent transparent;
}

等边三角形

等边三角形每条边相等，内角均是 60°。常用“左右透明、中间有色”做法：

/* 向上等边三角形 */
.equilateral {width: 0;height: 0;line-height: 0;font-size: 0;border-left: 60px solid transparent;   /* 左半边透明 */border-right: 60px solid transparent;  /* 右半边透明 */border-bottom: 104px solid red;     /* 底边着色，高≈60×√3/2≈51.96，双层合成约104px */
}

如果想要“向下”等边三角形，把 border-bottom 换成 border-top 即可。

平行四边形

平行四边形不需要“border hack”，只靠 skew() 倾斜即可：

.parallelogram {width: 200px;height: 100px;background-color: #FF9800;transform: skew(-20deg);  /* 倾斜20° *//* 如果里面有文字，需要再反向 skew 保持水平 */
}
.parallelogram .content {transform: skew(20deg);
}

梯形

梯形在上下边长不同时，用上下边不同宽度的 border：

.trapezoid {width: 0;height: 0;line-height: 0;font-size: 0;border-bottom: 100px solid #9C27B0;  /* 主色底部 */border-left: 40px solid transparent; /* 左侧斜边 */border-right: 80px solid transparent;/* 右侧斜边 */
}

上底为 border-bottom 颜色条上方两侧透明 border 的宽度差：
上底长度 = （border-left + border-right） – 左右透明宽度之差（这里 80–40 = 40px）。

更改鼠标样式

属性：cursor

属性值	样式
fefult	默认样式
pointer	小手
move	移动
text	文本
not-allowed	禁止

更改表单轮廓

属性：轮廓线outline

outline:0 或者 outline:none 可去掉默认的蓝色边框

outline-color 更改表单轮廓的颜色
outline-style 更改表单轮廓线样式（none / solid / dashed / dotted…）
outline-width 更改表单轮廓线宽度（数字+px / medium / thin / thick）
复合属性：outline:颜色（空格）样式（空格）宽度（空格）

取消文本域的拖拽

属性值：resize 用textarea{ resize:none; }取消拖拽性。

行内块元素的垂直居中对齐

属性值：vertical-align

用于设置一个元素（图片、表单、文字等）的垂直对齐方式，只对行内元素或行内块元素有效。

属性值	样式
baseline	(默认样式)元素放置在父元素的基线上
top	元素最顶端对齐
middle	元素中部对齐（垂直居中对齐）
bottom	元素最底端对齐

应用：解决图片底部缝隙问题

方法一：用div包裹的图片在默认情况下会给底部留有一定缝隙，因为默认基线对齐的情况下会留有字母（p、j、g等）超出基线触碰底线的余地。我们可以通过修改对齐方式来解决这个问题。

方法二：：把图片转为块级元素display:block;，但是图片独占一行，可能会影响布局。

溢出文字处理

文本溢出时，一般用省略号替代。

单行文本溢出显示省略号：

强制让文本在一行内显示：

write-space:nowrap;（默认为normal：自动换行）
超出部分隐藏：

overflow:hidden;
文字省略号代替超出部分：

text-overflow:ellipsis;(默认为normal：自动换行)

多行文本溢出显示省略号：

多行文本溢出显示省略号，有较大兼容性问题，适合于WebKit浏览器或移动端（移动端大部分是WebKit内核）。同时，需要严格控制盒子高度。

超出部分隐藏：

overflow:hidden;
使用WebKit的弹性盒子模型：

display: -webkit-box;
限制在一个块元素显示的文本的行数为n行：

-webkit-line-clamp: (数字，无单位);
设置子元素的排列方式为垂直排列：

-webkit-box-orient: vertical;

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

CSS布局技巧

margin负值的运用

一行紧挨排列的盒子如果有边框线，那么相邻边框线会紧挨，看起来就会比较粗。

解决方法：设置盒子margin值为负值（边框宽度为1px，那就设值为-1px），边框就会重合，看起来更美观。这样子理论上每个盒子都往左边移了一点，看似起不到作用，但实际上每移一个盒子后面的都会调整，会多移一点。

如果想要设置悬停时显示边框的效果，那么被重合在底下的边框将会被压住无法显示。

解决方法：设置hover悬停效果的时候，可以添加相对定位，此时当前盒子就会压住标准流的普通盒子。如果都有相对定位，则可以设置当前盒子的层级z-index。

浮动设置文字环绕效果

这是浮动的特性，也是浮动的本质。

行内块的巧妙运用

运用多个行内块创建视频网站下方翻页小方块。

   <style>.big{position: relative;width: 640px;height: 288px;}.big .pic img{width: 100%;}.box{font-size: 10px;bottom:5px;left:95px;position: absolute;text-align: center;}.box a{display: inline-block;width: 25px;height: 25px;background-color: #e8e8e8;border: 1px solid #ccc;text-align: center;line-height: 25px;text-decoration: none;font-size: 10px;}.box .long{width: 65px;}.box .none{background-color: #fff;border: none;}.box input{box-sizing: border-box;font-size: 10px;height: 25px;width: 50px;outline: none;}.box button{font-size: 10px;height: 25px;width: 35px;}
</style>
<body><div class="big"><div class="pic"><img src="#" alt=""></div><div class="box"><a href="" class="long">&lt;&lt;上一页</a><a href="">1</a><a href="" class="none">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="" class="none">...</a><a href="" class="long">&gt;&gt;下一页</a>到第<input type="text">页<button>确定</button></div></div>
</body>

CSS5新增内容及其他属性

新增选择器

新增了属性选择器、伪类选择器、结构伪类选择器和伪元素选择器。上面写过了。

新增基础属性及其他属性

border-box 介绍过了。
滤镜filter：将图片进行模糊、颜色偏移等处理。

filter:函数（数值） 例如filter:blur(5px) 数值越大越模糊。
opacity:透明度（0~100%）。

calc函数

calc()在声明属性值时可以进行一些（跨单位的）计算

例如：我们希望子盒子的宽度永远比父盒子小30像素：.son{ width: calc(100% - 30px); }

transition过渡属性

元素从一个状态改变至另一个状态时，添加该属性以达到动画效果。

transition: 需要过度的属性（空格）花费时间（空格）运动曲线（可不写，默认ease）（空格）延迟开始时间（可不写，默认0s）;

谁做过度给谁加。

花费时间和延迟时间单位都是秒s，有值的话必须写单位；

运动曲线：

默认ease逐渐减速；
linear匀速；
ease-in加速；
ease-out减速；
ease-in-out先加速后减速。

例如，我们想给div在鼠标悬停时做动画增宽效果：

div {width: 200px;height: 100px;background-color: pink;transition: width .5s ease 1s;
}div:hover {width: 400px;
}

为什么放在div标签中，而不是放在hover中：

放在基础选择器中：过渡效果会在状态变化时（进入和退出悬停状态）都生效。
放在 :hover 伪类中：过渡效果只会在进入悬停状态时生效，移出悬停状态时不会应用过渡效果。

想要一次改变多个属性：

/*改变几个特定属性，用逗号隔开：*/	
transition: width .5s, height .5s；/*后面两个值可以省略*/
/*改变全部属性，直接写all：*/
transition: all .5s;

2D转换效果

转换transform可以实现元素变形效果。

translate 移动

基础语法：默认直接变换位置
```
transform:translate(x,y); /*分别代表水平和垂直位置移动的的距离（像素或百分比），不移动用0占位。*/
/*或者分开写：*/
transform:translateX(数值);
transform:translateY(数值);
```
百分比值是按照盒子本身的宽度/高度计算；

translate最大的优点是不脱标，保留原来位置，不会影响到其他元素；

translate对行内元素无效。

应用：让盒子水平居中

让小盒子p在大盒子div中垂直居中：

div{position: relative;height: 500px;width: 500px;
}
p{position: absolute;top:50%;left:50%;width: 200px;height: 200px;transform: translate(-50%, -50%);/*减去自身值的一半*/
}

rotate 旋转

让元素在二维平面内旋转。

transform:rotate(度数，单位为deg);

正值为顺时针旋转，负值为逆时针旋转，默认旋转中心为元素的中心点。

设置转换的中心点transform-orign:（在元素本身中添加）

transform-orign:x y;横轴 / 纵轴，可以为百分比（默认50% 50%，按元素自身大小计算）、像素值、方位名词（sctop \ bottom \ left \ right \ center）

实例：盒子旋转上来（只有一个div父元素，子元素用伪元素写：.father::before）
```
.father{width: 200px;height: 200px;background-color: pink;border:palevioletred;margin:50px auto;overflow: hidden;
}
.father::before{content:"ljl";width: 100%;height: 100%;display: block;background-color: hotpink;transform: rotate(120deg);transform-origin:left bottom;transition: all 0.3s;	
}
.father:hover::before{transform: rotate(0);
}
```
scale 缩放

控制元素放大 / 缩小。

transform:scale(x,y);
- 属性值为纯数字，表示缩放的倍数，用逗号分隔！！
- （1,1）相当于没有效果；
- 只写一个参数默认x和y都是该参数；
- 比1小为缩小效果（0.5,0.5）；
- 可以设置转换中心点transform-orign进行缩放（默认为元素中心）；
- 不影响其他盒；
应用：鼠标经过商品图片时图片在盒子内部放大（超出部分overflow:hidden;）；鼠标经过翻页小按钮时按钮和页码一起放大。

2D转换综合写法：

同时使用多个转换，其格式为：transform:translate() rotate() scale()...;

顺序会影响转换效果：先旋转的话会改变坐标轴方向。如果需转换位移，位移应放在最前面。

动画效果

使用步骤：1. 先定义动画； 2. 再调用动画。

先用@keyframes定义动画：

@keyframes 动画名称 {0% { width:10px; }50% { width:80px; }100% { width:100px; }
}
/*如果只定义了0%和100%的效果，可以用from to替代：*/
@keyframes 动画名称 {from { width:10px; }to { width:100px; }
}

再在元素中调用：

div{width:200px;height:200px;margin:100 auto;/*调用动画*/animation-name:动画名称;/*持续时间*/animation-duration:持续时间;
}

动画的相关属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了animation-play-state属性。
animation-name	规定@keyframes动画的名称。（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function	规定动画的速度曲线，默认是“ease”。
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite无限循环。
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal”，还有alternate逆向播放。
animation-play-state	规定动画是否正在运行或暂停，默认是“running”，还有“pause”。可以利用这个属性在鼠标悬停时暂停动画。
animation-fill-mode	规定动画结束后状态，回到起始：返回backwards，停留至结束状态：保持forwards。

动画属性简写

animation:动画名称持续时间运动曲线何时开始播放次数是否反向起始或结束状态;

简写属性不包含animation-play-state暂停属性
想要动画走回来，而不是直接跳回来：

animation-direction:alternate;
想要动画结束后停在结束位置：

animation-fill-mode:forwards;

速度曲线函数animation-timing-funcation

属性值：

默认ease逐渐减速；
linear匀速；
ease-in加速；
ease-out减速；
ease-in-out先加速后减速；
steps()指定了时间函数中的间隔数量（步长，一步一步地走，分几步来完成动画）。

3D转换效果

X轴水平向右
Y轴竖直向下
Z轴指向屏幕外

3D移动transform: translate3d(x, y, z);

单位为像素，几乎不用百分比，代表三个轴的移动距离，不能省略（如果没有就用0占位）。

也可以分开写：

例如 transform:translateX(100px);

或者 transform:translateX(100px) translateY(100px) translateZ(100px);

z轴移动的效果呈现需要借助透视 perspective:

也称视距（模拟人眼到屏幕的距离），在二维平面产生近大远小的视觉立体效果，单位为像素，数值越大，成像越小。

透视需要写在被观察元素的父盒子上面（也可以是body）。

3D旋转rotate

判断顺逆方向：左手法则：大拇指朝向该轴正方向，手指弯曲方向就是顺时针。

transform: rotateX(45deg); (左手准则判断顺逆磕头就是负值)
transform: rotateY(45deg); (左手准则)
transform: rotateZ(45deg);
transform: rotate3d(x值， y值，z值，度数)

沿着自定义的轴旋转一定角度。

数字可以不带单位：矢量和方向。例如（1,1,0,35deg），即沿着对角线顺时针旋转35度。

3D呈现效果transform-style: preserve-3d;

控制子元素开启3D空间环境。默认值为flat，平面环境。

写在父级元素中，只会影响子盒子。

应用：

风车式翻转盒子
两面翻转盒子

CSS高级技巧及新增属性

CSS高级技巧及新增属性 jarringslee 文章目录 CSS高级技巧及新增属性精灵图 Sprite字体图标 iconfontCSS几何图形的写法更改鼠标样式更改表单轮廓取消文本域的拖拽行内块元素的垂直居中对齐溢出文字处理 CSS布局技巧CSS5新增内容及其他属性新增选择器新增基础属性及其他属性ca…...

编程日记 2025/6/9 6:57:24

GeoBoundaries下载行政区划边界数据（提供中国资源shapefile）

要下载山东省济南市各个区的行政区划边界数据，你可以通过 geoBoundaries 提供的数据来实现。下面是详细步骤，包括网页操作和可选的 Python 自动化方式。目录 ✅ 一、通过 geoBoundaries 官网手动下载1. 打开官网：2. 查找中国数据&#xff1a…...

编程日记 2025/6/9 6:56:20

《深入理解 Nacos 集群与 Raft 协议》系列四：日志复制机制：Raft 如何确保提交可靠且幂等

《深入理解 Nacos 集群与 Raft 协议》系列大家好，我是G探险者！ 在前几篇中我们介绍了选主与日志对比机制，它们保证了“谁能成为 Leader”以及“Leader 的日志是否可靠”。而当 Leader 已选定，系统需要把客户端的写请求写入所…...

编程日记 2025/6/9 6:55:15

大模型如何选型？嵌入模型如何选型？

欢迎来到啾啾的博客🐱。记录学习点滴。分享工作思考和实用技巧，偶尔也分享一些杂谈💬。有很多很多不足的地方，欢迎评论交流，感谢您的阅读和评论😄。目录引言模型优劣认知与模型选择大模型（L…...

编程日记 2025/6/9 6:54:03

float转换为整型过程中关于小数部分的处理

在大多数编程语言中，将 float 类型转换为整型时，小数部分不会自动进行四舍五入，而是会直接截断（即丢弃小数部分，仅保留整数部分）。具体行为可能因语言而异，以下是常见语言的示例： 1.…...

编程日记 2025/6/9 6:52:54

开源大模型网关：One API实现主流AI模型API的统一管理与分发

以下是对One API的简单介绍： One API是一个使用go语言开发的大语言模型 API 管理与分发系统支持Docker一键快速部署，且资源占用小，高性能开箱支持多平台大模型快速接入，包括OpenAI、Gemini、xAI、Grop、Anthropic Claude、Ollama…...

编程日记 2025/6/9 6:51:51

Java线程工厂：定制线程的利器

在Java中，线程工厂（Thread Factory）是一个创建新线程的工厂。它提供了一种方式，允许你在创建线程时定制线程的属性，比如设置线程名称、线程的优先级、守护线程属性等。线程工厂的主要目的是将线程的创建逻辑从使用线…...

编程日记 2025/6/9 6:50:49

智慧充电：新能源汽车智慧充电桩的发展前景受哪些因素影响？

全球能源结构转型与碳中和目标的推进，新能源汽车产业迎来爆发式增长，而智慧充电桩作为其核心基础设施，发展前景备受关注。智慧充电不仅关乎用户充电体验的优化，更是电网平衡、能源效率提升的关键环节。然而，其发展并…...

编程日记 2025/6/9 6:49:48

在Pnetlab6上绕过TPM、安全启动和 RAM 检查安装windows 11笔记

笔者本次安装的windows11的镜像为： zh-cn_windows_11_enterprise_ltsc_2024_x64_dvd_cff9cd2d.iso 1、创建镜像目录并上传iso文件 mkdir /opt/unetlab/addons/qemu/win-win11x64-2024-LTSC //目录名称务必按照官方文档格式，否则无法识别目录创建完成后，将.iso格式镜像上…...

编程日记 2025/6/9 6:48:46

【网站建设】不同类型网站如何选择服务器？建站项目实战总结

做了几个建站项目后，深刻体会到一件事：不同类型的网站，所采用的服务器策略是完全不同的。如果选错了服务器方案，可能带来过高的成本、过低的性能，甚至上线失败。这篇文章分享一下我在实战中的经验，供正在做建站项目的朋友参考。 🚩 1️⃣ 纯展示型网站 —— 静态服务…...

编程日记 2025/6/9 6:47:42

利用Pandas AI完成Excel大模型的结合实现自然语言问数

需求说明实现对Excel工具的自然语言问数，即可以通过界面上传Excel文件，然后在文本框里通过语言对话的形式问出要统计的内容。比如： 用户数有多少？ 语文成绩低于90的用户有多少？ ..... 实现思路 Pandas AI是基于…...

编程日记 2025/6/9 6:46:40

iptables实验

实验一：搭建web服务，设置任何人能够通过80端口访问。 1.下载并启用httpd服务器 dnf -y install httpd 开启httpd服务器 systemctl start httpd 查看是否启用下载并启用iptables，并关闭firewalld yum install iptable…...

编程日记 2025/6/9 6:45:36

前后端分离开发和前端工程化

来源：黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖SpringMyBatisSpringMVCSpringBoot等）_哔哩哔哩_bilibili 前后端混合开发： 需要使用前端的技术栈开发前端的功能，又需要使用Java的技术栈…...

编程日记 2025/6/9 6:44:34

web端rtmp推拉流测试、抽帧识别计数，一键式生成巡检报告

本文旨在实现无人机城市交通智慧巡检中的一个模块——无人机视频实时推拉流以及识别流并在前端展示，同时，统计目标数量以及违停数量，生成结果评估，一并发送到前端展示。对于本文任何技术上的空缺，可在博主主页前面博客…...

编程日记 2025/6/9 6:42:31

Excel 表格内批量添加前缀与后缀的实用方法

我们经常需要为 Excel 表格中的内容统一添加前缀或后缀，例如给编号加“NO.”、给姓名加“会员_”等。手动操作效率低，本文将介绍几种实用的方法，帮助你快速完成批量添加前缀和后缀的操作。使用“&”运算符添加前缀或后缀（推…...

编程日记 2025/6/9 6:41:29

Vulkan 3D Tiles渲染器开发笔记1-脚手架搭建

一、项目简介项目技术栈 CesiumNative + Dear ImGui + Vulkan 1.3 三维地理可视化系统详细项目功能说明 1. 3DTiles渲染功能实现完整的3DTiles格式解析与加载引擎支持LOD(Level of Detail)分层细节渲染可加载建筑模型、点云等3DTiles资产示例：加载城市级建筑3DTiles数据…...

编程日记 2025/6/9 6:40:28

2024 CKA题库+详尽解析| 15、备份还原Etcd

目录免费获取题库配套 CKA_v1.31_模拟系统 15、备份还原Etcd 题目： 开始操作: 1）、切换集群 2）、登录master并提权 3）、备份Etcd现有数据 4）、验证备份数据快照 5）、查看节点和Pod状态 6&am…...

编程日记 2025/6/9 6:36:11

【C/C++】std::vector成员函数清单

文章目录 std::vector使用指南1 不同版本提供的能力基础：C98 / C03 提供的成员函数C11 新增的成员函数C14：基本无变化（主要是标准库泛化，非 vector 成员变化）C17 引入的新特性（间接影响）C20 新增…...

编程日记 2025/6/9 6:35:09

如何借助Hyper - V在Windows 10中构建安全软件测试环境

视频演示手把手教你激活 Hyper-V 并安装 Windows 10 虚拟机一、引言：软件探索的风险与解决方案在数字化时代，软件更新换代的速度日新月异，对于热衷于探索新软件的朋友而言，主系统中安装新软件时的谨慎态度无可厚非。恶意软件的威胁犹如高悬的达摩克利斯之剑，稍不留…...

编程日记 2025/6/9 6:34:07

西门子 S7-1200 PLC 海外远程运维技术方案

西门子 S7-1200 PLC 海外远程运维技术方案一、面向海外场景的核心优势针对跨国企业、海外项目及远程技术支持需求，本方案基于巨控GRM552Y-CHE模块提供无缝的全球化远程PLC运维能力，突破地域及时差限制，显著提升国际项目响应效率。二、海…...

编程日记 2025/6/9 6:33:04

如何对Video视频进行SEO优化？

如何对Video视频进行SEO优化？ 在现代互联网的海洋中，搜索引擎优化（SEO）无疑是每一个网站管理员和内容创作者必须掌握的技能。而今天，我要向大家介绍一个极为强大的工具——Schema.org。它不仅能提升你的网站在搜索引擎…...

编程日记 2025/6/9 6:32:03

嵌入式学习--江协stm32day5

USART 1. 引脚与接口层异步引脚： TX：发送数据输出；RX：接收数据输入；SW_RX：单线半双工模式的接收引脚（替代 RX）。同步引脚：SCLK：同步模式下的时钟输出&…...

编程日记 2025/6/9 6:30:58

(LeetCode 动态规划（基础版）)96. 不同的二叉搜索树（递推 || 递归）

题目：96. 不同的二叉搜索树思路：二叉树长度为n时，枚举每个点u作为根节点root，那么root左边的数构成左子树种数left，root右边的数构成右子树种数right，那么当前u为根节点下，二叉树的种数为left*…...

编程日记 2025/6/9 6:29:56

服务器中CC攻击的特点有哪些？

CC攻击作为一种常见的网络攻击类型，主要是用来攻击网站页面的，当大量的用户在访问网站的过程中，打开页面的速度会变得比较慢，给数据库造成的压力就越大，CC攻击会消耗大量的服务器资源，给企业带来一定的经济…...

编程日记 2025/6/9 6:28:55

下面是在 Vue 3 项目中完整引入和使用 vite-plugin-svg-icons 的步骤 1、安装插件 npm install vite-plugin-svg-icons -D # 或 yarn add vite-plugin-svg-icons -D # 或 pnpm add vite-plugin-svg-icons -D 2、配置 Vite 在 vite.config.ts 或 vite.config.js 中配置&…...

编程日记 2025/6/9 6:27:54

智能网卡之hinic3 WQE（Work Queue Element）结构梳理

hinic3 WQE（Work Queue Element）结构详解本文基于 hinic3 驱动源码，对 WQE（Work Queue Element）做详细讲解。如需查阅完整源码和结构体定义可参考hinic3_nic_qp.h等文件。 1. WQE 的作用 WQE（Work Queue…...

编程日记 2025/6/9 6:26:52

go的工具库：github.com/expr-lang/expr

github.com/expr-lang/expr 是一个 Go 语言的表达式求值库，它允许你在运行时安全地执行表达式。主要用途包括： 1.表达式求值： program, err : expr.Compile("2 2") if err ! nil {// 处理错误 } result, err : expr.Run(program…...

编程日记 2025/6/9 6:25:49

力扣HOT100之二分查找：4. 寻找两个正序数组的中位数

这道题如果没有时间复杂度的限制的话，相当好做，但是这道题要求时间复杂度为O(log(m n))，思路很难想，我看了一圈题解，发现华南溜达虎的视频讲得还不错，我是参考他的思路写出来的，这里把他的思路…...

编程日记 2025/6/9 6:24:42

PyTorch——损失函数与反向传播(8)

Loss Functions 越小越好 L1loss MSELoss 损失函数 CrossEntyopyLoss 损失函数 import torch from torch.nn import L1Loss from torch import nn# 创建输入和目标张量，用于后续的损失计算 inputs torch.tensor([1,2,3],dtypetorch.float32) targets torch.tenso…...

编程日记 2025/6/9 6:23:37

macOS 升级 bash 到最新版本

macOS 的默认「终端」，千年不变的版本。》〉bash --version GNU bash, version 3.2.57(1)-release (arm64-apple-darwin24) Copyright (C) 2007 Free Software Foundation, Inc. 官方 bash.git - bash 已经将 bash 升级到了 5.2的大版本。 macOS 最新版系统的 ba…...

编程日记 2025/6/9 6:22:34

CSS高级技巧及新增属性

文章目录

精灵图 Sprite

字体图标 iconfont

CSS几何图形的写法

更改鼠标样式

更改表单轮廓

取消文本域的拖拽

行内块元素的垂直居中对齐

溢出文字处理

CSS布局技巧

CSS5新增内容及其他属性

新增选择器

新增基础属性及其他属性

calc函数

transition过渡属性

2D转换效果

动画效果

3D转换效果

相关文章：