前端笔记与经验 (遇到就更新内容）

目录

前言

1 css里定义变量

2 元素下方有线

3 浏览器不显示滚动条（请看本文第7点）

4 网格布局

两行三列

12 宫格

​编辑

两行4列，最后一个元素占两格

5 点击图片，打开新的浏览器标签页查看图片

6 js插件之图片缩放插件Zooming（element-ui里的image组件有大图预览的功能）

7 禁止刷新的时候页面向右移动

8 文字不能被选中

9 元素向右延伸动画

10 实现鼠标悬停（hover）时才出现伪元素样式

11 H5 CDN引用 vue 和 element 出现的问题

12 VScode 前端插件 Beautify 格式化 javascript，json，css，sass和HTML  

13 网页一行，两行文字显示省略号

​编辑

14 网页文字中间加横线 

15 CSS中设置父元素透明度不影响子元素透明度

16 取消之前的样式属性

17 css 实现翻转效果

18 H5视频问题

19 横向滚动tabbar css样式

20 vant轮播

22 pc端禁止网页缩放

23 自适应网页设计

自适应网页设计（Responsive Web Design） - 阮一峰的网络日志http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

移动端适配：font-size设置的思考 - axl234 - 博客园1. 问题的引出如果html5要适应各种分辨率的移动设备，可以使用rem这样的尺寸单位，针对各个分辨率范围在html上设置font-size的代码：html{font-size:10px}@mediahttps://www.cnblogs.com/axl234/p/5156956.html

24 网页的整体缩放

25 字间距

标签宽度确定，让文字在标签内平均分布_hibiscusxin的博客-CSDN博客标签宽度确定，让文字在标签内平均分布

用户名 {{ info.userName }}https://blog.csdn.net/qq_41838435/article/details/115353617

26 伪类

27 rtmp协议播放视频

video 属性和事件用法大全 - rogerwu - 博客园1、video 属性 2、video 事件https://www.cnblogs.com/rogerwu/p/10072119.html关于H5页面在微信浏览器中视频播放的问题_weixin_30745553的博客-CSDN博客Android 上，因为各个软件使用的浏览器渲染引擎不一样，所以视频播放的效果差异也很大，这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。而iOS是不允许使用第三方浏览器内核的，就是Google Chrome也是用的系统内建的Webkit浏览器内核 (就是WebView了)，APP 都是使用的系统自带的浏览器进行页面渲染,所以IOS的微信浏览器是Chrome的webkit内核。...https://blog.csdn.net/weixin_30745553/article/details/98011664?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.pc_relevant_paycolumn_v3&spm=1001.2101.3001.4242.1&utm_relevant_index=3

28 点击效果

29 css 文字颜色渐变 animation,css3文字渐变动画

30 切换tabbar时，div返回顶部

31 网页接入微信客服

32 让某个子元素靠右显示 

33 显示小数

34 绝对定位 垂直居中

35 js 深拷贝对象，使页面展示数据不受下面数据修改的影响

36 折叠面板 折叠展开动画

37 获取类型

38 列表删除

39 网页，H5文本识别换行符，

40 小程序文本识别换行符

41 css3的filter(滤镜) 属性

模糊

设置阴影

置灰置暗

42 背景怎么设置，才不会受鼠标滚轮的缩小放大影响

43 手机端微信小程序的view设置点击效果hover，点击的时候会出现一层蓝色

44 伪元素的content文字内容换行

45 js 判断类型

46  app 有 ios和安卓，时间要这样 2022-11-11 --> 2022/11/11

47 :first-child 选择器的注意点

48 :first-child 容易选择出错，可以用nth-of-type替代 

49 点击效果，使用伪类 :active

50 隐藏手机号中间几位

51 正式环境与测试环境切换

52 常用的边框阴影色 #ededed

53 img标签不能用伪元素

54 用伪元素动态计数

55 亮光效果

56 鼠标经过闪光效果，用过渡做动画

57 数据可视化

58 动态获取获取元素的高度宽度

59 css高亮

60 js颜色转rgba

61 改变原生滚动条样式

62 uniapp 微信小程序的深度选择器兼容

---

还有好多坑没写上，有空就补，仅供参考

感谢活跃在互联网并且乐于分享的技术人们~

前言

有一些知识点在另一篇文章了，毕竟微信小程序开发也有专门的岗位，初心就是想专门搞一个微信小程序工作过程中的知识点总结，但是写着写着突然觉得，前端也用得上，，，一通百通嘛，尽量标题描述清晰一点，你们看目录好找。

小程序实战工作的知识点总结_坐等夕阳落time的博客-CSDN博客

1 css里定义变量

:root {
  --primary-color: #ff434f;
  --secondary-color: #e3e3e3;
  --text-color-lightest: #e7e9ec;
  --text-color-darker: #2e2e2e;
  --text-color-dark: #494949;
  --text-color-gray: #8b8b8b;
  --text-color-dark-gray: #727272;
  --text-color-light-gray: #c6c6c6;
  --backdrop-color: rgba(42, 42, 42, 0.7);
}

2 元素下方有线

第一种： 线在下方且居中取决于divname的父级是否是纵向排列并且使元素水平居中

效果：

/* 下方红线 */
.divname::after {
  content: "";
  display: block;
  width: 80%;
  height: 4px;
  background-color: var(--primary-color);
  margin-top: 14px;
  transform: translateX(10%);
}

第二种：直接用相对定位来使元素下方有线

.filter-app {
  width: 100%;
  height: 90%;
  position: relative;
}

.filter-app::after {
  position: absolute;
  bottom: -8px;
  left: 0%;
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: black;
}

3 浏览器不显示滚动条（请看本文第7点）

/* 左右滑动的滚动条不显示 */
overflow-x:hidden;

/* 上下滑动的滚动条不显示 */
overflow-y:hidden;

4 网格布局

CSS Grid 网格布局教程 - 阮一峰的网络日志

做响应式网站时，有的区域用网格布局比较方便。

举例：如效果图所示的两行三列，元素是两行两列

两行三列

.features {
  margin-top: 20PX;
  display: grid;
  /* 重复几次，重复的值  1fr：容器宽度的1/3*/
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 126px 126px;
  column-gap: 5vw;
}

.feature {
  display: grid;
  grid-template-areas:
    "icon title"
    "icon content";
  grid-template-columns: 60px 1fr;
  grid-template-rows: 1fr 3fr;
}

.feature .icon-name {
  grid-area: icon;
  font-size: 34px;
  color: var(--primary-color);
}

.feature-title {
  grid-area: title;
  font-size: 18px;
  color: var(--text-color-darker);
}

.feature-content {
  grid-area: content;
  color: var(--text-color-gray);
  margin-top: 8px;
}

12 宫格

用网格布局，代码短且快 

.grids-12box {
	display: grid;
    // 一行四列，等宽
	grid-template-columns: repeat(4, 1fr);
    // 列间距
	column-gap: 20rpx;
    // 行间距
	row-gap: 18rpx;
}

.btn-select {
	// width: 120rpx;
	height: 60rpx;
	background: #EC3D38;
	border-radius: 12rpx;
	font-size: 24rpx;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 60rpx;
	text-align: center;
}

.btn-unselect {
	background: #F7F7F7;
	color: #686868;
}

两行4列，最后一个元素占两格

// 父元素
.sign-date-list {
	display: grid;
	// 一行四列，等宽
	grid-template-columns: repeat(4, 1fr);
	// 列间距
	column-gap: 30rpx;
	// 行间距
	row-gap: 30rpx;
}
// 子元素最后一个元素
.last-item {
	grid-column-end: span 2;
}

5 点击图片，打开新的浏览器标签页查看图片

6 js插件之图片缩放插件Zooming（element-ui里的image组件有大图预览的功能）

var zooming = new Zooming({
  scaleBase: 0.1,
  customSize: {
    width: 1088,
    height: 688
  },
  bgColor: 'rgb(0, 0, 0)',
  bgOpacity: '0.5'
});
zooming.listen('.img-zoomable');

7 禁止刷新的时候页面向右移动

本来你的视宽是100%的，然后刷新多了，网页整体向右移动，你的视图就不是100%了，就多出了空白的部分，然后左边的内容被遮住。。。。气死我了都，不能简单的写 ‘overflow-x: hidden; ’ 还得把 ‘max-width: 100%; ’ 这个加上。

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

8 文字不能被选中

默认网页文字是能被选中的，就是鼠标放在文字上，会变成 手写的大写的i

  ， 加上这个属性后，鼠标箭头符号就不变了。建议用在通配符里，想要文字被选中的时候再单独设置。

* {
  user-select:none;
}

9 元素向右延伸动画

https://www.runoob.com/try/try.php?filename=trycss3_transition1

10 实现鼠标悬停（hover）时才出现伪元素样式

.filter-app.active:after,
.filter-app:hover:after {
  position: absolute;
  bottom: -5px;
  left: 0%;
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: black;
}

11 H5 CDN引用 vue 和 element 出现的问题

浏览器报错 Uncaught TypeError: Cannot read property 'prototype' of undefined 的解决办法_love_onefly的博客-CSDN博客

12 VScode 前端插件 Beautify 格式化 javascript，json，css，sass和HTML  

我格式化了css，还满好用的

13 网页一行，两行文字显示省略号

做法1：这种写法显示省略号的前提是宽度是固定的，没有固定宽度(父级或者自己），隐藏失效！

/* 一定要确定当前元素是不换行的，并且超出的部分要隐藏，文字显示省略号才生效*/  
.divname {
    max-width: 100%;
    white-space:nowrap; /* 如何处理元素内的空白 */
    overflow: hidden;
    text-overflow: ellipsis;
}

做法2（推荐）：不用考虑宽度的问题！ 

如果没有定宽的，可以父布局display:flex; 然后子布局flex:1，占满剩余的空间，然后就可以一行显示省略号了

display: -webkit-box;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

两行文字显示省略号： 

.item-name {
    // padding: 10rpx;
    padding-left: 10rpx;
    padding-right: 10rpx;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all; // 英文换行
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

 不要有padding-top,padding-bottom,不然就像下面这样了，其余行文字没隐藏干净：

14 网页文字中间加横线 

删除
// 或者
199元 
// 或者
删除

15 CSS中设置父元素透明度不影响子元素透明度

一般我们设置透明度，经常用的 opacity: 0.5; 这个导致子元素的透明度也是0.5，即使子元素设置opacity: 1;，也是在父元素的透明度0.5的基础上设置为1，所以子元素透明度还是0.5。要想设置父元素透明度不影响子元素透明度，可以之间在backgroud里设置。

/* 0.5是透明度，三个0是rgb , 即黑色 */
background:rgba(0,0,0,0.5); 

16 取消之前的样式属性

在响应式里会用的，不同的屏幕尺寸不同的排版

/* 取消的某个属性值用unset */
position:unset;

17 css 实现翻转效果

效果自己测，有时候需要在父元素写一次，然后在自己本身写一次，能得到自己想要的效果哦！

transform: scale(-1,1);

transform: scale(1,-1);

transform: scale(-1,-1);

18 H5视频问题

移动端video点开后层级过高问题_吞石鱼的博客-CSDN博客_video层级过高

19 横向滚动tabbar css样式

  .filter-spus {
    width: 100%;
    /*设置横向滚动*/
    overflow-x: scroll;
    /*禁止纵向滚动*/
    overflow-y: hidden;
    /*设置边距改变效果为内缩*/
    box-sizing: border-box;
    margin: 0 10px;
    padding: 0 10px;
  }

  .filter-spus::-webkit-scrollbar {
    /*隐藏滚动条*/
    display: none;
  }

  .filter-spu {
    flex-shrink: 0; /* 宽度不被挤压*/
    font-size: 15px;
    margin: 20px 10px;
    /*段落中文本不换行*/
    white-space: nowrap;
    color: #666666;
  }

主要是 overflow-x: scroll; flex-shrink: 0; 还有最重要的一点，你的所有元素的宽度一定要先比显示的屏幕宽度大，才能达到滚动的效果

flex-shrink: 0 不添加时，我的元素宽度写了400rpx了，然后不生效被挤压 

flex-shrink: 0 添加后

20 vant轮播

稍微好看一点点的样式，但是还是没能一比一复刻ui的图，嘤嘤，傻*催得急，我懒得弄了，唉唉唉，不能自由的敲代码。

22 pc端禁止网页缩放

记: 禁止用户PC浏览器上缩放页面 - 知乎

23 自适应网页设计

先挂理论链接，最后自己总结一下，实际中怎么做的

自适应网页设计（Responsive Web Design） - 阮一峰的网络日志http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

如何使页面在缩放的过程中不变形_peri_zxy的博客-CSDN博客_浏览器放大缩小页面不变（响应式布局）如何使页面在缩放的过程中不变形今天在改造一个前端页面时，发现页面视图在pc端显示的好好的，一旦缩小页面或者打开开发者工具，进入移动端视图时，页面就会发生严重的变形。导致观看效果特别不好，一开始我以为是我编写的代码有问题。后来查阅资料才知道，要想使页面在缩放的过程中不变形。可以使用响应式布局的方式。什么是响应式布局？响应式布局（Responsive design），意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响https://blog.csdn.net/peri_zxy/article/details/117195558

设备像素比devicePixelRatio简单介绍_我用键盘敲出一个世界-CSDN博客_devicepixelratio今天分享设备像素比devicePixelRatio简单介绍，我个人觉得这个很重要有必要去进行了解，今天我分享给大家。 本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持，随着显示器的发展，这个属性也慢慢登上了前端技术的舞台。 本文内容大部分属于翻译性质内容，因此，会不那么通俗易懂。不过，你是做手机开发的https://blog.csdn.net/wang17866603359/article/details/77326448

移动端适配：font-size设置的思考 - axl234 - 博客园1. 问题的引出如果html5要适应各种分辨率的移动设备，可以使用rem这样的尺寸单位，针对各个分辨率范围在html上设置font-size的代码：html{font-size:10px}@mediahttps://www.cnblogs.com/axl234/p/5156956.html

常见的移动端H5页面开发遇到的坑和解决办法_小白快跑true的博客-CSDN博客_移动端h5页面手机共通问题问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone 4的960640分辨率在网页里只显示了480320,这样devicePixelRatio＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使...https://blog.csdn.net/tabweb/article/details/104844322实际中做法：

小于564的用rem单位，其他的都用px单位。

原因：手机竖屏时用rem单位，在各机型都可以完美适配，但是手机横屏了，就变成了灾难。手机横屏时用px，虽说会发生有的手机字大，有的手机字小，但是差别并没有很离谱，并且你整个网页的排版布局都会很完整，并且横屏时，不要使用vh单位了，也是统统使用px。用户看的时候不会觉得怎么竖屏与横屏差距那么多。接上响应式，网页在任何屏幕中都比较舒服，缺点就是打代码的累一点，多个屏幕尺寸下，元素的大小都要一点点的调。。。。。。。。。。

在564尺寸以下用rem，可以使用下面的方法，做布局：

第一步：引入可伸缩的js

GitHub - amfe/lib-flexible: 可伸缩布局方案可伸缩布局方案. Contribute to amfe/lib-flexible development by creating an account on GitHub.https://github.com/amfe/lib-flexible/

把index.js 下下来，然后把下面的代码加上

第二步：vscode 安装插件

px2rem+ ，安装插件的目的是自动帮你计算rem的数值，你敲的时候直接敲px的数值，它就会以你配置的基准计算rem的数值，你在选择就好了。

rem的计算公式：（你的元素大小/设计稿宽度）* 10

然后对插件进行基准配置：设计稿宽度除以10

24 网页的整体缩放

经过一个多星期，我懂了，做好响应式，网页整体缩放都没事了。。。

第一种：原理是使用CSS3的scale来实现缩放（粗糙的）

把下面的代码放在body标签上面就可以了

第二种：我把百度和csdn的网站，滚轮缩放了一遍。

浏览器缩放原理以及窗口、html页面大小 - 浅笑安然

-webkit-min-device-pixel-ratio: 2是什么意思？ - 世有因果知因求果 - 博客园DPI（DPR） stands for Dots Per Inch which technically means printer dots per inch。这个参数实际上量化了屏幕的物理分辨率和显https://www.cnblogs.com/kidsitcn/p/4385624.html

css3的 -webkit-min-device-pixel-ratio属性 解决高清的适配_迩菜flysun的博客-CSDN博客_min-device-pixel-ratio今天的学习到的-webkit-min-device-pixel-ratio来记住一下！！我们先想一下： 一般普通图在的1920*1080，是很正常的，但是如果放在的2k或者4K屏幕里面，背景图就是模糊掉，为什么呢？因为的正常的屏幕是的 1个像素，而高清屏幕是 4像素的点！ 如图 解决方案： 把之前的原图放大 ” 2 ” 倍的； 用的css处理之前的图的： 代码如下的： ...https://blog.csdn.net/lny1126/article/details/80538253

25 字间距

第一种：

CSS letter-spacing:10px;

第二种：

view 宽度一定要给，然后使用text-align-last，字均匀分布在固定宽度内

.v-category-title {
	width: 130rpx;
	font-size: 28rpx;
	text-align: justify; // 其实这行不写也生效
	text-align-last: justify;
}

  

CSS text-align-last 属性 | 菜鸟教程

标签宽度确定，让文字在标签内平均分布_hibiscusxin的博客-CSDN博客标签宽度确定，让文字在标签内平均分布

用户名 {{ info.userName }}https://blog.csdn.net/qq_41838435/article/details/115353617

26 伪类

css伪类:before及:after除了插入文字内容还能做点儿啥？画图 - Dreamsqin - 博客园全手打原创，转载请标明出处：https://www.cnblogs.com/dreamsqin/p/11181416.html 1、什么时候用伪类:before和:after？ 结合实际开发情况，说一https://www.cnblogs.com/dreamsqin/p/11181416.html

27 rtmp协议播放视频

【随手记录】vedio标签展示rtmp协议视频流 - 空知大仙人 - 博客园 https://www.cnblogs.com/whaleX/p/13954799.html

video 属性和事件用法大全 - rogerwu - 博客园1、video 属性 2、video 事件https://www.cnblogs.com/rogerwu/p/10072119.html关于H5页面在微信浏览器中视频播放的问题_weixin_30745553的博客-CSDN博客Android 上，因为各个软件使用的浏览器渲染引擎不一样，所以视频播放的效果差异也很大，这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。而iOS是不允许使用第三方浏览器内核的，就是Google Chrome也是用的系统内建的Webkit浏览器内核 (就是WebView了)，APP 都是使用的系统自带的浏览器进行页面渲染,所以IOS的微信浏览器是Chrome的webkit内核。...https://blog.csdn.net/weixin_30745553/article/details/98011664?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.pc_relevant_paycolumn_v3&spm=1001.2101.3001.4242.1&utm_relevant_index=3

28 点击效果

.divname:active {
    background: #F0F0F0;
  }

:style="{background: tab==0? '#F0F0F0':'white'}"

29 css 文字颜色渐变 animation,css3文字渐变动画

css 文字颜色渐变 animation,css3文字渐变动画_Maple丿锋的博客-CSDN博客这次给大家带来css3文字渐变动画，实现css3文字渐变动画的注意事项有哪些，下面就是实战案例，一起来看一下。利用css3这个属性(背景剪裁)：background-clip: border-box || padding-box || context-box || no-clip || text本次用到的就是: -webkit-background-clip:text;栗子：1、.masked{...https://blog.csdn.net/weixin_35216469/article/details/119373408

30 切换tabbar时，div返回顶部

$(".cross-border-goods-inphone").scrollTop(
 0
);

31 网页接入微信客服

客服账号是我公司的行政去弄的，最后给我发了二维码和一条链接，直接用a标签，手机上就能跳到微信去，pc端不能，但会显示请用手机打开，所以pc端可以做成点击链接，显示二维码

联系客服：400-xxxx-xxx

32 让某个子元素靠右显示 

方法一：
.item{
margin-left:auto;
}

方法二：
.item{
flex:1;
text-align:right;
}

同时居中

.v-order-item-info2 {
    flex: 1;
    text-align: right;
    margin: auto;
    background: red;
}

 

33 显示小数

两位小数，那就是除以100，然后用toFixed(2)显示小数点后两位

{{ (item.priceFee / 100).toFixed(2) }}

34 绝对定位 垂直居中

.ic-arr-down {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 14rpx;
}

35 js 深拷贝对象，使页面展示数据不受下面数据修改的影响

用于  表单对象 ，展示给用户看的，和提交给系统接口的数据格式不一致，比如价钱，展示给用户看的是显示小数，但是提交给接口时，就要处理成无小数，也就是乘以100

 // 深拷贝dataForm，使页面展示数据不受下面数据修改的影响
 const dataForm = JSON.parse(JSON.stringify(this.dataForm))

Object.assign()不是深拷贝，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用，那么它也只指向那个引用。

// 1、深度拷贝，a 创建副本 a1 把副本给b b=a1, b改变属性值，不会影响到a，即a是页面展示，b是程序操作对象
let a1 = JSON.parse(JSON.stringify(a))
let b = a1
// 2、把a1中存在b的键的值拷贝给b, 如果b中的键比a多，就得用Object.assign(目标对象,源对象)
Object.assign(b,a1)

36 折叠面板 折叠展开动画

前端 折叠面板 折叠展开动画_坐等夕阳落time的博客-CSDN博客前言以uniapp代码来说明折叠面板原理效果原理首先折叠展开动画选择 transition属性transition: all 0.4s;然后使动画生效：动态改变折叠面板的高度折叠面板初始高度为0（height 0 ）然后再根据折叠面板里面内容的高度，改变折叠面板的height，* 如果你的折叠面板是已知的展开高度，那就直接在0与已知高度里进行切换* 如果你的折叠面板高度是不确定的，那就要在折叠面板里面再用一层view把内容包起来，然后写代码动态获取这个view的高度https://blog.csdn.net/weixin_43991241/article/details/124950526

37 获取类型

console.log(Object.getPrototypeOf(dataForm.skuList[0].priceFee))

38 列表删除

remove(item) {
    // 删除任意位置的元素
    var index = this.formData.labelList.indexOf(item)
    if (index !== -1) {
        this.formData.labelList.splice(index, 1)
    }
    // 删除最后一个元素
    this.formData.labelList.pop()
    // 删除第一个元素
    this.formData.labelList.shift()
},

39 网页，H5文本识别换行符，

使用css样式： white-space:pre-line;

.group-intro {
	font-size: 30rpx;
	margin-bottom: 10rpx;
    // 识别换行符
	white-space:pre-line;
}

之前：

之后：

但是要特别注意，手机端小程序white-space:pre-line;是不生效的，微信开发者工具的模拟器上white-space:pre-line;生效文字换行成功。

40 小程序文本识别换行符

直接使用text标签就可以了

但是text标签上的margin padding 生效的效果会不符合预期，所以在text标签外面需要再用一层view标签包裹，实现margin padding样式。

41 css3的filter(滤镜) 属性

CSS3 filter(滤镜) 属性 | 菜鸟教程

设置好看的样式必学的属性，最常用的效果如下：

模糊

手机端用得最多，就高清的图片在上面（400*400），底下是这个图片的模糊图（600*600），就搞焦点嘛

设置阴影

这个比box-shadow高级，box-shadow是容器阴影，filter的阴影是绕着内容，也就是聊天气泡的三角形，filter阴影可以绕着三角形来画，而box-shadow就是不饶着三角形，直接就是里面的方形阴影了，感兴趣的可以自己试试

置灰置暗

就社会上发生了重大沉重事件，所有网站都要置灰置暗的

42 背景怎么设置，才不会受鼠标滚轮的缩小放大影响

和图片大小没关系，重点是cover，背景就不会随滚轮变大变小了

 background: url(~@/assets/login_images/login-bg.jpg) no-repeat;

 background-size: cover; // 重点是这个

43 手机端微信小程序的view设置点击效果hover，点击的时候会出现一层蓝色

去除点击元素出现的蓝色高亮背景：

-webkit-tap-highlight-color: rgba(0,0,0,0);

	
		取消
	
    
		确认
	


.btn--hover {
	background-color: #e6e6e6 !important;
}

.popup-baojia-footer {
	display: flex;
	flex-direction: row;
	border-top: 1px solid rgba(153, 153, 153, 0.1);
	user-select: none;
	box-sizing: border-box;
}

.popup-foot-btn {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	color: rgb(96, 98, 102);
	flex: 1;
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	box-sizing: border-box;
	text-align: center;
	border-radius: 2px;
}

.btn-confirm {
	color: rgb(41, 121, 255);
	border-left: 1px solid rgba(153, 153, 153, 0.1);
}

44 伪元素的content文字内容换行

&::after {
	content: var(--shopGoodStatu);
	// content: "点击\A编辑"; // \A符号
	white-space: pre; // 这个一定要加
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100rpx;
	height: 100rpx;
	background: var(--shopGoodBg);
	color: #FFFFFF;
	font-size: 20rpx;
	border-radius: 10rpx;
	// padding-left: calc(var(--shopGoodPad) * 1rpx);
	// padding-right: calc(var(--shopGoodPad) * 1rpx);
	box-sizing: border-box;
	text-align: center;
	// text-indent: 1em;
}

大学解惑10 - CSS中的content怎么换行，以及使用before伪类的优点_经海路大白狗的博客-CSDN博客_content换行

45 js 判断类型

typeof(item)

46  app 有 ios和安卓，时间要这样 2022-11-11 --> 2022/11/11

 因为在ios ‘2022-11-11’字符串转时间失败，不能直接new Date(‘2022-11-11’)

// 2022-11-11 --> 2022/11/11
let endTime = new Date(this.pinguiItemByParent.endTime.replace(/-/g, '/'))

47 :first-child 选择器的注意点

48 :first-child 容易选择出错，可以用nth-of-type替代 

// 表示选择第三个 .category-item类名 的元素
.category-item:nth-of-type(3) {
       position: relative;
}

nth-of-type的正确理解

关于nth-of-type、nth-child选择失败的问题_a:nth-of-type(1)_zerocean_的博客-CSDN博客

.name:nth-of-type(1) 不能单纯的理解为 选择第一个class为name的元素！！！！！

应该理解为，选择父级下class为name的元素，然后这些元素里的同标签名元素中的第一个，如果父级的第一个标签元素的class不是name，那就是选不中的！

49 点击效果，使用伪类 :active

  

.category-item:active {
	background-color: #e9e9e9;
}

50 隐藏手机号中间几位

想隐藏多少位就改中间的数字，不想手动写*，就用方法 repeat(数字) 重复

正则： /^(\d{3})\d{4}(\d{3})$/

getBaomiPhone(phone,num) {
	// let reg = /^(\d{3})\d{5}(\d{3})$/;	
	// $1取正则中第一个括号的内容，$2取正则中第二个括号的内容
	// return phone.replace(reg, "$1*****$2");

	// 正则中使用变量 -> 通过构造函数的方式
	let reg = new RegExp('^(\\d{3})\\d{' + num + '}(\\d{3})$')
	// 用 repeat(数字) 重复
	let stars = '*'.repeat(5)
	return phone.replace(reg, "$1"+ stars +"$2");
},

// 不要使用这个方法了！直接使用正则
changePhone(phone) {
	if (!phone) return;
	let changeNum = phone.substring(3, phone.length - 3);
//   这种不好的地方就是，不一定是4-8位 长这样changeNum，也许其他位置连续5个数字也是changeNum呢
	return phone.replace(changeNum, '*****');
},

changePhone(phone) {
	if (!phone) return;
	// let changeNum = phone.substring(3, phone.length - 3);
	// return phone.replace(changeNum, '*****');
	var reg = /^(\d{3})\d{5}(\d{3})$/;
	return phone.replace(reg, "$1*****$2");
}

51 正式环境与测试环境切换

// 1、process.env.NODE_ENV
// 开发环境
if (process.env.NODE_ENV === 'development') {
  baseUrl= 'http://192.168.1.56:8000'
}
// 生产环境
if (process.env.NODE_ENV === 'production') {
  baseUrl= 'https://xxxxxxxx'
}
// 2、process.env.UNI_PLATFORM
if (process.env.UNI_PLATFORM === 'mp-weixin') {
	console.log('当前是生产环境')
} else {
	console.log('当前是开发环境')
}

52 常用的边框阴影色 #ededed

 

box-shadow: 0upx 0upx 10upx 1upx #ededed;

53 img标签不能用伪元素

img标签的伪元素是不被渲染的，所以页面上看不到。想用伪元素，就用在img标签的父元素上。

54 用伪元素动态计数

CSS的伪类和伪元素 - 简书

这篇文章滑倒最后。

55 亮光效果

用css3渐变搞亮光

background: linear-gradient(to right, transparent , rgba(255,255,255,.6),transparent);

56 鼠标经过闪光效果，用过渡做动画

57 数据可视化

d3.js 前端可视化，控制svg达到交互，案例：座位模版选座 https://blog.csdn.net/Achernar0208/article/details/125467937

数据可视化编程-使用D3.js（2022）_哔哩哔哩_bilibili

https://github.com/Shao-Kui/D3.js-Demos

58 动态获取获取元素的高度宽度

this.width = this.$refs.mainContent.offsetWidth
this.height = this.$refs.mainContent.offsetHeight

59 css高亮

.img_ad:hover {
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
}

60 js颜色转rgba

        colorToRgba(color, opc=1) {
            console.log(color)
            if(color.indexOf('#') !== -1) {
                var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
                var hex = color.replace(rgx, function(m, r, g, b) {
                  return r + r + g + g + b + b;
                });
                var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                if(!rgb){
                    return color;
                }
                var r = parseInt(rgb[1], 16);
                var g = parseInt(rgb[2], 16);
                var b = parseInt(rgb[3], 16);
                return 'rgba(' + r + ',' + g + ',' + b + ',' + opc + ')';
            }
            if(color.indexOf('rgb(') !== -1) {
                let r, g, b;
                let rgbaAttr = color.match(/[\d.]+/g);
                if (rgbaAttr.length >= 3) {
                    let r, g, b;
                    r = rgbaAttr[0];
                    g = rgbaAttr[1];
                    b = rgbaAttr[2];
                    return 'rgba(' + r + ',' + g + ',' + b + ',' + alp + ')';
                }
            }
            return color
        },

61 改变原生滚动条样式

	.posterBox_sliderItem::-webkit-scrollbar {
	 //    width: 120rpx !important;
	    height: 6rpx !important;
	    background: rgba(0,0,0,0.1);
	    border-radius: 10rpx !important;
		padding-left: calc(100% - 120rpx);
	}
	.posterBox_sliderItem::-webkit-scrollbar-thumb {
		background: linear-gradient(44deg, #FF4C15 0%, #FF6363 100%);;
	    border-radius: 6rpx;
	    transition: 0.3s ease-in-out;
	}

62 uniapp 微信小程序的深度选择器兼容

在method同级下添加：
options: {
    styleIsolation: 'shared'
}

	/deep/ .uni-calendar-item__weeks-box-item {
		width: 100%;
	}
	
	/deep/ .uni-calendar-item__weeks-box-item .uni-calendar-item__weeks-box-circle {
		// background-color: transparent;
		background: #FFEDE7;
		display: inline-block;
		width: 100%;
		width: 80%;
		height: 100%;
		top: 0;
		right: 0;
		z-index: -1;
		left: 50%;
		transform: translateX(-50%);
	}
	
	/deep/ .uni-calendar-item__weeks-box-item .uni-calendar-item__weeks-box-circle+.uni-calendar-item__weeks-box-text {
		color: #FF4C15;
	}
	
	/deep/ .uni-calendar__weeks-item .uni-calendar-item--isDay {
		background-color: rgba(0, 0, 0, 0);
		color: #FF4C15 !important;
		border-radius: 5px;
	}
	
	/deep/ .uni-calendar__weeks-item .uni-calendar-item--checked {
		background-color: rgba(0, 0, 0, 0);
		color: #FF4C15 !important;
		border-radius: 5px;
	}
	
	/deep/ .uni-calendar-item__weeks-box-item .uni-calendar-item__weeks-box-text .uni-calendar-item--isDay-text::after {
		content: "今日";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		text-align: center;
		font-size: 18rpx;
	}
	
	/deep/ .uni-calendar-item--disable .uni-calendar-item__weeks-box-item .uni-calendar-item--isDay-text::after {
		content: "";
	}

uniapp小程序用deep重写组件样式不生效 已解决_uniapp deep_造梦者FZ的博客-CSDN博客

身份证号校验

IDCardValid(card) { // 身份证校验
	    var vcity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古",
	        21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏",
	        33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南",
	        42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆",
	        51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃",
	        63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外"
	    };
		//是否为空
		if (card === '') {
		    console.log('证件号不能为空！');
		    return false;
		}
		//校验长度，类型
		var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/
		if (reg.test(card) === false) {
		    console.log('长度不正确');
		    return false;
		}
		//检查省份
		var province = card.substr(0, 2);
		if (vcity[province] == undefined) {
		    console.log('省份不正确');
		    return false;
		}
		//检验生日
		var len = card.length;
		var arr_data,year,month,day,birthday;
		if (len == '15') {
		    var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
		    arr_data = card.match(re_fifteen);
		    year = arr_data[2];
		    month = arr_data[3];
		    day = arr_data[4];
		    birthday = new Date('19' + year + '/' + month + '/' + day);
		}
		if (len == '18') {
		    var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
		    arr_data = card.match(re_eighteen);
		    year = arr_data[2];
		    month = arr_data[3];
		    day = arr_data[4];
		    birthday = new Date(year + '/' + month + '/' + day);
		}
		var now = new Date();
		var now_year = now.getFullYear();
		if (birthday.getFullYear() != year || (birthday.getMonth() + 1) != month || birthday.getDate() != day) {
		    console.log("生日不正确")
		    return false;
		}
		//检验位的检测 
		if (card.length == '15') {
		    var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
		    var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
		    var cardTemp = 0, i;
		    card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
		    for (i = 0; i < 17; i++) {
		        cardTemp += card.substr(i, 1) * arrInt[i];
		    }
		    card += arrCh[cardTemp % 11];
		}
		len = card.length;
		if (len == '18') {
		    var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
		    var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
		    var cardTemp = 0, i, valnum;
		    for (i = 0; i < 17; i++) {
		        cardTemp += card.substr(i, 1) * arrInt[i];
		    }
		    valnum = arrCh[cardTemp % 11];
		    if (valnum != card.substr(17, 1)) {
		        console.log("检验位不正确")
		        return false;
		    }
		} else {
			console.log("检验位不正确")
			return false;
		}
		
		return true
	},
	getIDCardAge(card){ // 获取身份证年龄
		var len = (card + "").length;
		var strBirthday = "";
		if (len == 18)
		{
		    strBirthday = card.substr(6, 4) + "/" + card.substr(10, 2) + "/" + card.substr(12, 2);
		}
		if (len == 15) {
		    strBirthday = "19" + card.substr(6, 2) + "/" + card.substr(8, 2) + "/" + card.substr(10, 2);
		}
		var birthDate = new Date(strBirthday);
		var nowDateTime = new Date();
		var age = nowDateTime.getFullYear() - birthDate.getFullYear();
		if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
		    age--;
		}
		return age;
	},

63 悬浮操作栏盒子样式

.tableFixedBox {
    background-color: #FFF;
    z-index: 999;
    position: absolute;
    top: 60px;
    right: 20px;
    width: calc(100% - 40px);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
}