- 博客(44)
- 收藏
- 关注
RSS订阅原创 瀑布流
<!DOCTYPE html><html><head> <style> .box { margin: 10px; column-count: 2; column-gap: 10px; } .item { margin-bottom: 10px; } .item img{ ...
2020-12-30 16:58:37
157
原创 如何解决进入路由时候数据不刷新的问题
只需要在watch中添加watch:{‘$route’(to,from){this.inbound();}},
2020-12-24 14:30:09
347
原创 position的四个属性
position:absolute会使元素脱离文档流当元素设置position:absolute时，会脱离正常文档流，后面元素会忽略该元素－》覆盖可以给元素设置min-height解决－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－postion属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值：position: absolute position: relative position: ..
2020-12-19 21:40:53
509
1
转载 前端面试题转载
javascript:JavaScript中如何检测一个变量是一个String类型？请写出函数实现typeof(obj) === “string”typeof obj === “string”obj.constructor === String请用js去除字符串空格？方法一：使用replace正则匹配的方法去除所有空格: str = str.replace(/\s*/g,"");去除两头空格: str = str.replace(/^\s*|\s*$/g,"");去除左空格： str =
2020-11-22 22:09:26
543
原创 前端面试真题及答案整理
谈谈你对 dns-prefetch 的理解DNS 是什么-- Domain Name System，域名系统，作为域名和IP地址相互映射的一个分布式数据库。DNS Prefetching浏览器根据自定义的规则，提前去解析后面可能用到的域名，来加速网站的访问速度。简单来讲就是提前解析域名，以免延迟。使用方式这个功能有个默认加载条件，所有的a标签的href都会自动去启用DNS Prefetching，也就是说，你网页的a标签href带的域名，是不需要在head里面加上link手动设置的。但a标签.
2020-11-22 22:02:41
240
原创 字体在chrome浏览器下最小只能设置成12px的解决办法
在这一年的工作中，我发现很多问题你利用自己的「聪明才智」绕过去了，总有一天它会和你不期而遇，今天我们就来直面一个字体兼容性的小问题：Chrome谷歌浏览器下不支持css字体小于12px。我们先来看个效果图（chrome下）：给你看个栗子.png从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时，显示的都是一样大小，都是默认12px；那么网上有一个方法就是给当前样式添加Chrome私有属性：-webkit-text-size-adjust:none;可是我进行验证后发现并无
2020-11-19 14:35:18
850
原创 Javascript基本数据类型
JavaScript 基本数据类型String类型字符串属性和方法字符串属性字符串方法Number类型算术运算符赋值运算符比较运算符逻辑运算符Boolean类型Undefined类型Null类型类型判断String类型字符串是存储字符（比如 “Keafmd”）的变量。字符串可以是引号中的任意文本。可以使用单引号或双引号。123字符串属性和方法原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。原始值可以使用 JavaScript 的属性和方法，
2020-11-19 13:47:54
118
转载 Web相关面试题
1,判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20var reg = /1[a-zA-Z_0-9]{4,19}/;/∗注意：1.要用开头和/;/*注意：1.要用^开头和/;/∗注意：1.要用开头和结尾，2.总长度5-20翻译为{4,19}；3.别忘了还有下划线；*/reg.test(“a1a__a1a__a1a__a1a__”);2，截取字符串abcdefg的efgvar str = “abcdefg”;if (/efg/.test(str)) {/判
2020-11-19 11:22:17
2525
原创 before和after效果
css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。一、概念：1.定义The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element. It is
2020-11-19 11:21:57
544
原创 优雅降级与渐进增强
渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给;b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要;c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带;...
2020-11-18 13:01:17
346
4
原创 css优先级
1.CSS优先级比较！important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认2.CSS权重计算我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。4个等级的定义如下：第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#co
2020-11-18 13:00:10
110
原创 前端面试题个人总结
基础：（我基础太差，恶补了一段时间，还是不行。。。。所以，就算上班了，还是要看看基础，不能专顾手头的工作）html：关于html，会问一下html5新增了哪些特性，又淘汰了哪些特性。增加：查阅 http://www.w3school.com.cn/html5/html5_reference.asp1、音频（之前做微信H5动画比较多，音频算是比较常用的）2、视频（同上，关于微信H5，它提供了很多参数，查阅 https://www.jianshu.com/p/ad2c0057d0ff ）3、canv
2020-11-18 12:59:08
168
原创 行内与块级的细节区别
一，下面从概念的角度来说一下块级元素和行内元素1.块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素2.行内元素：也叫做内联元素，一般都是语义级别的基本元素，内联元素已办只能容纳文本或者其他内联元素。块元素（block element）和内联元素（inline element）都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。而当加了css控制以后，块元素可以变为内联元素，内
2020-11-18 11:42:03
252
2
原创 一个HTML 导航栏下划线跟随效果
一个HTML 导航栏下划线跟随效果这几日学习html，一直在B站乱逛，发现网站的动效做的真好。然后翻到了这一页：点此查看上面的导航栏是一个下划线跟随的效果。由于有一个初始的选项（当前页面对应标签保持蓝色），鼠标划过时除了高亮项下面的下划线也要跟随。如果只实现前面这些效果可以用css完成，但是其实这里面的下划线是一个动画效果，仔细观察发现下划线相当于在border-bottom上面做水平运动，切换标签时有一个过渡效果，因此实际上这个下划线其实是一个独立的bar滑块结构定义如下：复制代码综合视
2020-11-18 11:26:00
685
原创 前端开发-css基础篇
前端开发—— CSS基础篇一、css的引入行内样式（优先级最大）内部样式外部样式（推荐）二、选择器基础选择器复合选择器元素的显示模式1、行内元素概念特点2、块级元素概念特点3、行内块元素概念特点4、元素显示模式的转换三、字体设置1、字体大小2、字体类型3、字体粗细4、字体倾斜5、字体阴影6、字体属性连写7、字体颜色8、水平对齐方式9、行高10、首行缩进11、下划线四、文本垂直居中五、背景设置1、背景颜色2、背景图像3、背景图像的平铺方式
2020-11-18 11:17:49
296
原创 如何清除浮动
为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题，如下图，红色边框为父元素，在子元素为浮动后无法被撑开了在这里插入图片描述清除浮动的方法1.额外标签法在最后一个浮动标签后，新加一个标签，给其设置clear：both；2.父级添加overflow属性父元素添加overflow:hidden补充：这个方法的原理是通过触发BFC方式，实现清除浮动BFC 全称为 块格式化上下文 (Block Formatting Context) 。他有以下两个特性：1.
2020-11-18 11:03:44
979
原创 清除浮动及其原理
清除浮动的三种方式及其原理浮动元素的特性浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动元素带来的问题因为浮动元素脱离文档流，所以对于其处于正常文档流中父元素，无法获知其高度，导致父元素自身的高度塌陷（失去浮动元素占据的高度）。清除浮动的三种方式设置float son div123overflow:hidden; 使用overflow:hidden 清除浮动123其中，zoom:1;用于兼容IE6。clear:both
2020-11-18 10:54:52
605
原创 算法
冒泡排序思路：俩俩交换，大的放在后面，第一次排序后最大值已在数组末尾。因为俩俩交换，需要n-1趟排序（比如10个数，需要9趟排序）代码实现要点：两个for循环，外层循环控制排序的趟数，内层循环控制比较的次数。每趟过后，比较的次数都应该要减1选择排序思路：找到数组中最大的元素，与数组最后一位元素交换。当只有一个数时，则不需要选择了，因此需要n-1趟排序代码实现要点：两个for循环，外层循环控制排序的趟数，内层循环找到当前趟数的最大值，随后与当前趟数组最后的一位元素交换插入排序思路：将一个元素插入
2020-11-18 10:52:33
88
原创 标准盒子
盒模型的组成，由里向外分别是content，padding，border，margin盒子模型在页面中占的实际宽度是：（margin+padding+border）*2 + width，高度同理。盒模型有标准盒模型和ie盒模型，二者的区别是标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。js如何获取和设置b
2020-11-18 10:49:22
286
原创 flex布局: 一行显示固定个数,强制换行且均匀分布
在这里插入图片描述如图需求:一行显示3个强制换行宽度不写死高度固定– html 123456789---css.mycards{ // 大盒子 width: 98%; display: flex; flex-wrap: wrap; justify-content: space-between;}.card_item{ // 每个item flex: 1; width:
2020-11-13 16:15:41
3646
原创 onresize事件
window.onresize监听事件 onresize 事件会在窗口或框架被调整大小时发生。 支持onresize的标签：<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <d.
2020-11-13 14:52:12
402
原创 vue中模拟hover事件
vue：使用mouseenter模拟hover事件任肖 2019-07-04 16:34:16 8315 收藏 2分类专栏： vue版权<el-button type=“primary” icon=“el-icon-search” plain round@mouseenter.native=“knowledge = ‘即将推出，敬请期待’”@mouseleave.native=“knowledge = ‘知识库搜索答案’”>{{knowledge}}...
2020-11-13 14:48:23
942
原创 Vue中native的用法
Vue中native的用法nativenative在Vue.js官方的大致意思是监听自定义标签根标签的事件，将原生事件绑定到组件上，比如a标签可以直接绑定原生事件，但是如果你通过自定义封装了button标签，起成了名字myself-abutton，这时候绑定事件就需要加上native了，下面写一个简单的例子方便理解：例子四个按钮，分别是普通标签不加native和加native，自定义标签不加native和加native<!DOCTYPE html><html>
2020-11-13 14:47:24
722
原创 原生JS实现淡出淡入效果
前言一提到淡入淡出效果，大家可能会想到jQuery的fadeIn(),fadeOut()和fadeToggle()函数，它们被封装到库中，很方便被调用。但是有时候只为了一个简单的淡入淡出效果，并不需要去调用庞大的jQuery库，所以，下面我们用纯js代码实现淡入淡出的效果。需求分析要实现淡入淡出效果，就是要使用到setInterval()函数，改变element节点透明度opacity，来解决这个问题。功能实现fadeIn()和fadeOut()都有三个参数，分别是事件（必填），淡入淡出
2020-11-12 17:45:03
2714
2
原创 vue如何实现滑动到指定位置
在Vue中，有三种方式可以实现H5页面滑动至指定位置方法1： //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('targetbox'); this.target= targetbox.offsetTop; }) }) } //.
2020-11-12 16:43:50
1107
原创 JS保留俩位小数
一、我们首先从经典的“四舍五入”算法讲起1、四舍五入的情况 1 2 var num =2.446242342; num = num.toFixed(2); // 输出结果为 2.45 2、不四舍五入第一种，先把小数边整数： 1 Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77 第二种，当作字符串，使用正则匹配： 1
2020-11-10 00:46:16
3194
原创 toString方法
Number，boolean，object和字符串值都有一个toString方法toString可以输出以二进制，八进制，十六进制表示的字符串值var num=10；alert（num.toString()); "10"alert(num.toString(2)); "1010"
2020-11-08 15:29:46
493
原创 JS的深克隆
js对象不像变量那样，简单的赋值就能进行克隆的，对象进行赋值时，只是创建了一个新的指针指向相同的存储空间。就像这样var a={a:1}var b=a;b.a=2这时输出a你会发现，a的值同样发生了改变。这一点在你进行数据操作时，又想保留原来数据时，你就需要深度克隆了。深度克隆的方法有两种（据我所知 (￣.￣) ）有一种时通过js序列化，将js转换成字符串，然后再将字符串转换成js对象。js字符串的克隆就比对象的克隆简单多了。简单的赋值操作就能完成。具体代码为var obj = {a:1
2020-11-07 01:20:38
172
原创 ES6之const
定义常量在ES5中定义一个常量：Object.defineProperty(window,'PI',{ value:3.14, writable: false})console.log(PI)//3.14PI=5console.log(PI)//3.141 2 3 4 5 6 7在ES6中定义一个常量//典型报错const a=5a=6//报错,常量不可以改变const b//报错，常量必须赋初始值b=6//const声明的数组、对象
2020-11-07 01:17:41
154
原创 js实现一个函数判断输入字符串是否为回文
题目：实现一个函数，这个函数可以用来判断输入字符串是否为回文。忽略大小写，如Helleh，王中王等。首先解这题的首要问题是理解回文这个概念，回文的定义是把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情趣，叫做回文，也叫回环。分析：1）既然知道了回文的概念，那么我们很明显的知道这题需要遍历，也明白遍历到回文中间的那个字符的对应索引就可以了2）然后对前面一半遍历的字符与后面遍历的一半字符进行比较，如果相同就是回文；如果不同就不是回文3）可是到底该怎么实现遍历前一半字符和后面一
2020-11-07 01:09:01
2026
转载 面试技巧
业洞察 丨作者 / 刘润 整理 / 由之面试，是找到好工作的过程中，最最重要的一环。在我14年的职业生涯中，亲自面试的人应该不下1000人了。看过的简历还要更多，尤其是微软上海早期扩张的时候。所以今天，我就从自身经历出发，给你分享一些面试经验。— 1—定制化面试面试中最重要的一条心法，就是详细了解对方，匹配自己优势，然后定制化面试。想象一下，明天你要和心仪的女生第一次下午茶约会了，你会做哪些准备呢？你会研究对方喜欢喝什么，是喜欢喝茶还是咖啡？喜欢星巴克？还是更小众有特色
2020-11-06 09:31:06
231
原创 Promise
描述一个Promise对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个promise，以便在未来某个时候把值交给使用者。一个Promise必然处于以下几种状态之一：待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。 已兑现（fulfilled）: 意味着操作成功完成。 已拒绝（rejecte...
2020-11-06 09:14:16
632
原创 关于let和var在setTimeout中的输出问题
for (var i = 0; i < 10; i++) { setTimeout(function(){ console.log(i); },0) } // 输出十个 10 for (let j = 0; j < 10; j++) { setTimeout(function(){ console.log(j); },0) } 输出：setTimeout是个异步函数，它会...
2020-11-04 13:21:43
1605
1
原创 nextSibling和nextElementSibling的区别
nextSibling返回其父节点的childNodes子节点列表中紧随其后的节点nextElementSibling返回的则是其父节点的childNodes子节点列表中紧随其后的元素节点previousSibling和previousElementSibling类似DOM 节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：1. 整个文档是一个文档节点，节点类型：92. 每个 HTML 元素是元素节点，节点类型：13. HTML 元素内的文本是文本节点，节点类型：
2020-11-04 13:21:27
1186
原创 如何用css画出一个三角形
CSS还是蛮强大的，对于三角形这个在网页上不规则的形状，很多前端小朋友们直接切图了，这样的做法可谓是偷懒啦，下面咱们就体验下纯CSS是实现的三角形吧。各种角度，带你尝试下。其实三角的实现就是用border来做的。下面是步骤分析：1、首先来看看给一个元素添加不同颜色的边框吧说明：我们来看四条边框相交的角，这几条边框相交线并不是直角，而是一个倾斜的状态，其实这就是我们三角形形成的一个方法；继续往下看哦。2、我们尝试着把一个元素的宽高设置为0；然后在添加上边框试试看效果。
2020-10-29 14:10:02
2619
原创 绝对定位和相对定位的区别？
一：绝对定位position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位与文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。#box_relative { position: absolute; left: 30px; top: 20px;}二：相对定位...
2020-10-29 13:42:48
862
原创 介绍一下标准的css盒子模型？低版本的IE的盒子模型有什么不同的？
1、有两种盒子模型：IE盒子模型（border-box）和W3C标准盒模型（content-box）。盒模型组成：内容（content）、填充（padding），边框（border），边界（margin）四个部分。IE盒模型和W3盒模型的区别：（1）IE盒模型的width包含：content+border+padding（2）W3C盒模型的width只包含：content在ie8+已上的浏览器的浏览器默认是标准盒模型，可以通过css3 的新特性box-sizing改变其属性。如果在i
2020-10-29 13:15:52
360
原创 JS中function的length属性
今天在看函数式编程时，发现了一段有意思的代码，如下： function a(x,y){} a.length // 2 function b(x,y=2,z){} b.length // 1 function c(x,...args){} c.length //1 运行了一下，结果没错，知道length属性指的是形参的个数，但是不明白后两种函数为啥length的值为1。找了资料，弥补了这块小知识点的空缺，定义如下：...
2020-10-26 00:00:16
2687
原创 进程和线程的区别是什么？
进程是什么？程序并不能单独运行，只有将程序装载到内存中，系统为它分配资源才能运行，而这种执行的程序就称之为进程。程序和进程的区别就在于：程序是指令的集合，它是进程运行的静态描述文本；进程是程序的一次执行活动，属于动态概念。在多道编程中，我们允许多个程序同时加载到内存中，在操作系统的调度下，可以实现并发地执行。这是这样的设计，大大提高了CPU的利用率。进程的出现让每个用户感觉到自己独享CPU，因此，进程就是为了在CPU上实现多道编程而提出的。有了进程为什么还要线程？进程有很多优点，它提供.
2020-10-25 00:02:22
204
原创 进程和线程的区别是什么？
根本区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位在开销方面：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。所处环境：在操作系统中能同时运行多个进程（程序）；而在同一个进程（程序）中有多个线程同时执行（通过CPU调度，在每个时间片中只有一个线程执行）内存分配方面：系统在运行的时候会为每个进程分配不同的内存空间；而
2020-10-24 23:42:32
222
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人