qq_58626489的博客

开发中遇到一个问题，输入框唤起键盘后，输入框会被键盘遮挡，需要手动滑动才能漏出来，影响用户体验。

CSS选择器是CSS的基石，赋予开发者精确控制HTML文档中元素样式的能力。选择器定义了CSS规则集将应用到HTML文档的哪一部分，通过不同类型的选择器，可以根据元素的tag、ID、class、属性、状态等各种条件来应用样式。本文将详细介绍各种CSS选择器并提供示例代码。

连字符（-）:对于连续序列的字符，连字符（-）用来提供简写形式，表示字符的连续范围。比如，[abc]可以写成[a-c]，[0123456789]可以写成[0-9]，同理[A-Z]表示26个大写字母。通常来讲，一些简单的中文字符串可以使用正则表达式处理，以上介绍一些简单的入门用法，若象处理复杂的逻辑，不建议使用复杂的正则，建议使用函数处理，这样可以增加代码的可读性。脱字符（^）:如果方括号内的第一个字符是[^]，则表示除了字符类之中的字符，其他字符都可以匹配。[]:匹配方括号内的任意一个字符。

hover 选择器用于选择鼠标指针浮动在上面的元素。:hover 选择器适用于所有元素1. 中间什么都不加 控制子元素；2. ‘+’ 控制同级元素(兄弟元素)；3. ‘～’ 控制就近元素；

H5页面播放音乐其实很简单，只需要用这个标签就行十分方便。不过只有这个如果是移动端用到，iphone不会开启是自动播放需。关于点击按钮音乐开启/停止播放的效果做了个简单的例子。路径选在音乐所在位置就行了。

canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。 标记和 SVG以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持, Internet Explorer 从 IE9 开始。Chrome 和 Opera 9+ 也支持。

在开发过程中想要使页面随着某个元素自动滚动，可以使用Element.scrollIntoView()。效果：页面自动滑动，播放的歌词居中。下面举例一个歌词的居中显示。

要在CSS3中实现动画的无限循环，你可以使用animation属性和infinite关键字。在上面的示例中，我们首先使用@keyframes声明了一个名为的关键帧动画。然后，在.element类选择器中，通过animation属性将该动画应用到一个元素上。设置2s即动画的时长为2秒，并且使用infinite关键字来表示动画应该无限循环。你可以根据需要调整关键帧的百分比和对应的样式，以创建不同效果的动画。

2）em，元素的字体高度：em是相对于父元素的属性值而计算的，所以em是非具体的数值。现指的是字符宽度的倍数，用法类似百分比，如：0.5em, 1em,2em等，通常1em=16px，为了简化font -size的换算，可以在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。1）px，像素：px是相对于显示器屏幕分辨率而言。

在第二个关键帧中，我们将顶部的边框颜色设置为透明，同时将右侧的边框颜色设置为黑色（border-top-color: transparent;我们使用透明的边框颜色来隐藏边框，以创建流动的效果。在上面的代码中，我们定义了一个名为“border-flow”的动画，并将其应用到我们的元素上。在接下来的两个关键帧中，我们将不同的边框颜色设置为黑色，以创建流动的效果。最后，在最后一个关键帧中，我们将左侧的边框颜色设置为透明，同时将顶部的边框颜色设置为黑色，这样我们就完成了一次边框的流动循环。

的动画，其中0%表示动画的起始状态，50%表示动画的中间状态，100%表示动画的结束状态。在这个例子中，动画会从红色渐变到黄色再到蓝色。CSS中的动画用法主要是通过使用关键帧动画（@keyframes）来定义动画的不同阶段及其样式。最后，当页面加载时，我们会看到一个具有动画效果的正方形盒子从红色渐变到黄色再到蓝色，并且这个动画会一直循环播放。在上面的例子中，我们首先使用关键帧动画定义了一个名为。属性来定义动画的循环次数（在本例中为无限循环）。属性来定义动画的持续时间，来指定要应用的动画，

先来看下效果图，嫌麻烦就不用具体图片来实现了，主要是理清思路。（自动轮播，左右按钮切换图片，小圆点切换图片，鼠标移入暂停轮播，鼠标移出继续轮播）

在上面的代码中，我们使用Math.floor向下舍入( i < Math.floor(arr.length/2) ) i < Math.floor(arr.length/2)给定数组的一半元素。reverseArray1函数将一个数组( arr )作为参数，并通过向后循环遍历给定的数组，以相反的顺序创建一个相同元素的新数组( newArr )( let i = arr.length - 1;数组的最后一个元素将是循环的起点(arr.length — 1) ，它将一直运行直到到达数组的起点(i ≥ 0)

折叠以后文字并没有消失，查资料说是el-menu子标签中不能含有div，但是排查了后也没有使用div，最后发现是因为我的一级导航没有包裹到标签中，因为是直接使用了一个简易的非折叠导航栏，折叠是后边加上去的，所以忽略了这个问题。这一部分写在了标签外面。使用span包裹一下就好了。

属性“form”在类型“ArrayConstructor”上不存在。是否需要更改目标库?请尝试将 “lib” 编译器选项更改为“es2015”或更高版本。打开jsconfig.json文件，如果引入了typescript语法就打开tsconfig.json。

在Flex弹性布局中，元素的布局仅依赖于父容器的设置，而不再需要复杂的相对或绝对定位。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。

这篇文章主要介绍了vue中$refs的用法及作用详解,非常不错，具有参考借鉴价值，需要的朋友可以参考下。

Vue2中我们通常将响应式数据放在data中，再Vue3中提供了组合式API的写法，即数据和方法写在一起，便于维护。由于本文中我使用的是一个单HTML文件引入vue做演示，所以需要使用return返回响应式数据，vue文件的话中无需再使用return。Object.assign(car,对象1,对象2,...)，对象1和对象2传入car中，最终显示最后传入的对象（对象为键值对）通过使⽤ Proxy 来实现响应式（数据劫持），并通过Reflect 操作源对象内部的数据。reactive只能定义响应式的对象。

Vue3中引入了ref来创建响应式数据，但是在js代码中引用ref的变量数据时必须要加上.value才可以,这会导致在使用大量数据时，会经常忘记带上.value，从而导致错误。下面为大家分享VScode中自动添加.value的插件volar。首先确保VScode中安装了如下的插件，就是vue官方的插件。效果：输入test，自动加上.value。然后点击Vscode左下角的设置。勾选Auto Insert。

props: ['title','value1']传入父元素com-a中的title和value1属性值 ，title和value1通过v-bind绑定data中的变量，因为自定义的组件内容中，是无法直接引用data中的变量的，所以通过这种方式可以间接使用。Vue中自定义组件标签：先定义组件内容，然后注册，这里com-a就是自定义组件名。同时可以结合父元素属性传递，实现数据互通。页面中就可以直接使用了。

Vue中直接在标签中引用数组如何不带中括号，你选择的：

npm安装依赖特别的慢，有时甚至卡死不动，解决方法！

下拉选项框，下面以一个名称和链接举例子，拿出连接后可以直接绑定在标签属性中使用。因为只能引用data中的数据，所以还是要将select选中的数据于data中的变量绑定。将数据放在一个数组中以对象的形式存储，option中使用v-for遍历数据，拿出需要的值就可以了。使用vue协议个简单的下拉选项框，通过响应式数据可以动态绑定选项框数据。

在创建vue项目时选择了TypeScript语言，创建完成后使用VS Code打开，右下角提示Bad TypeScript version。该问题由于type script版本过高导致的问题，看了下TypeScript版本是5.3，是由于版本过高提示会出现小Bug。然后终端重新输入npm i 下载依赖包，完成后就可以啦！先删除掉项目中的node_modules依赖包。

使用vite创建的Vue项目，部分文件出现报错。今天使用vite创建vue项目后，发现有几处配置文件和组件报错，虽然不影响项目启动，但看着不是很舒服。首先在创建完成后，先在终端运行npm i安装一下依赖包。安装完成后项目是可以正常启动的。