知识碎片

2025年07月10日知识碎片

知识碎片

背面隐藏

backface-visibility: hidden;

保持宽高比

宽度设置百分比，设置aspect-ratio:16/9;(宽/高)
宽高都使用vw/vh

Css小手指

cursor: pointer;

设置光标的类型

cursor: pointer;		/* 小手指 */
cursor: help;			/* 鼠标带？ */
cursor: wait;			/* 鼠标变加载 */
cursor: crosshair;		/* 鼠标变+ */
cursor: not-allowed;	/* 鼠标变禁止 */
cursor: zoom-in;		/* 鼠标变放大镜 */
cursor: grab;			/* 鼠标变拖拽小手 */

Css图片模糊

filter: blur(npx);

1
2
3

filter: blur(10px);			/* blur()是一个函数，里面数值越大，图片越模糊 单位px*/
filter: brightness();		/* brightness() 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。单位%*/
filter: contrast();			/* contrast() 函数可调整输入图像的对比度。单位%*/

Css滚动动画

scroll-behavior: smooth;

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

1	scroll-behavior: smooth;

魔法注释

JsDoc、魔法注释

@param 参数注释
/**
* @param {String} wording 需要说的句子
*/
@return 返回值注释
/*
* @return {Number} 返回值描述
*/
@example 示例注释
/*
* @example
* multiply(3, 2);
*/
@author 代码的作者信息
/**
 * @author Jane Smith <change@change.com>
 */
@version当前代码的版本
/*
* @version 1.2.3
*/
@file对当前代码文件的描述
/**
 * @file Manages the configuration settings for the widget.
 */

多重条件判断优化

最简单就是if else if 或switch

优化实用对象+??（空值合并）

// 优化前
let permissions = ''
const value = "admin"
if(value=="admin"){
	permissions = "普通管理员"
}else if(value=="xadmin"){
	permissions = "超级管理员"
}else{
	permissions = "非管理员用户"
}

// 优化后
let permissions = ''
const value = "admin"
const values = {
	admin:"普通管理员",
	xadmin:"超级管理员"
}
permissions = values[value]??"非管理员用户"

关于第三方图片资源403问题

为什么文章列表数据中的好多图片资源请求失败返回 403？

这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容，而第三方平台对图片资源做了防盗链保护处理。

第三方平台怎么处理图片资源保护的？

服务端一般使用 Referer 请求头识别访问来源，然后处理资源访问。

关于Referer：http://www.ruanyifeng.com/blog/2019/06/http-referer.html

Referer 是 HTTP 请求头的一部分，当浏览器向 Web 服务器发送请求的时候，一般会带上 Referer，它包含了当前请求资源的来源页面的地址。服务端一般使用 Referer 请求头识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等。

怎么解决？

不要发送 referrer ，对方服务端就不知道你从哪来的了，姑且认为是你是自己人吧。

如何设置不发送 referrer？

用 <a>、<area>、<img>、<iframe>、<script> 或者 <link> 元素上的 referrerpolicy 属性为其设置独立的请求策略，例如：

<img src="http://……" referrerPolicy="no-referrer">

或者直接在 HTMl 页面头中通过 meta 属性全局配置：

<meta name="referrer" content="no-referrer" />

滚动条样式

用png格式背景图片，切图的时候调整留白
然后修改滚动条滑块样式

/* 滚动条 */
.scrollbar {
	width: 98%;
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 6.5rem;
	padding-right: .4rem;
	box-sizing: border-box;
}

.scrollbar::-webkit-scrollbar {
	width: 0.2rem;
	background: url(../images/scrollbar_bg.png) no-repeat center / 150% 100%;
}

.scrollbar::-webkit-scrollbar-thumb {
	/* background: url(../images/scrollbar_thumb_bg.png) no-repeat center / 100% 100%; */
	border-radius: .1rem;
	background: linear-gradient(0deg, #9a2aea, #c868fe);
}

页面内容使用JS动态获取

<div>
  <script>
    document.write((new Date()).getFullYear())
  </script>
</div>

下载命名

默认文件名称改为英文或数字，可以使用a标签的download属性指定名称

移动端文字

在模拟器中设置的文字大小调整时没有什么变化，但是到了手机中大小就有明显的变化了，在编写代码的时候不能依靠模拟器

文字溢出‘…’

/*1. 先强制一行内显示文本，默认 normal 自动换行*/
  white-space: nowrap;
 /*2. 超出的部分隐藏*/
  overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
  text-overflow: ellipsis;

/*1. 超出的部分隐藏 */
overflow: hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

视频封面

在video上面加上poster属性，指定封面图片

<video src="https://ideal.chinaceotv.com/2023/20230321/dianqiyiliao.mp4" poster="images/video_1.png" controls width="100%"
height="100%" preload="preload" x5-video-player-type="h5" x5-video-player-fullscreen="true"
webkit-playsinline="true" playsinline="true" x5-video-orientation="portrait"
style="object-fit: cover;"></video>

图片裁剪拉伸

object-fit：用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
initial	设置为默认值，关于initial
inherit	从该元素的父元素继承属性。关于inherit

谷歌浏览器网页截图

打开控制台：ctrl + shift + p
输入：cfz

判断是移动端还是PC端

通过js判断

if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
  // 移动端
  // window.location.href="http://campus.51job.com/whlkg/";
} else {
  // PC
  // window.location.href="http://campus.51job.com/whlkg/";
}

hover后加上边框元素偏移

默认加上边框，颜色设置透明

Flex布局的间距

其他的属性照常设置，增加gap属性

gap：10px

点击穿透

给需要穿透的dom设置

1	pointer-events:none

小程序视频地址填坑

在小程序里面，如果视频的地址包含中文会出现在模拟器可以播放，但是真机不能播放
使用这个函数将需要转换的部分取出来进行转换

// 用于编码URL参数 
encodeUrlParam(param) {
  // 对参数进行encodeURIComponent编码  
  return encodeURIComponent(param);
},
// 用于解码URL参数
decodeUrlParam(param) {
  // 对参数进行decodeURIComponent解码  
  return decodeURIComponent(param);
}

网页可编辑

1	document.designMode = "on";