energy drink-CSDN博客

原创瀑布流

<!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 162

原创如何解决进入路由时候数据不刷新的问题

只需要在watch中添加 watch:{ ‘$route’(to,from){ this.inbound(); } },

2020-12-24 14:30:09 352

position:absolute会使元素脱离文档流当元素设置position:absolute时，会脱离正常文档流，后面元素会忽略该元素－》覆盖可以给元素设置min-height解决－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ postion属性定义了一个元素在页面布局中的位置以及对周围元素的影响。该属性共有5个值： position: absolute position: relative position: ..

2020-12-19 21:40:53 513 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 550

原创前端面试真题及答案整理

谈谈你对 dns-prefetch 的理解 DNS 是什么-- Domain Name System，域名系统，作为域名和IP地址相互映射的一个分布式数据库。 DNS Prefetching 浏览器根据自定义的规则，提前去解析后面可能用到的域名，来加速网站的访问速度。简单来讲就是提前解析域名，以免延迟。使用方式这个功能有个默认加载条件，所有的a标签的href都会自动去启用DNS Prefetching，也就是说，你网页的a标签href带的域名，是不需要在head里面加上link手动设置的。但a标签.

2020-11-22 22:02:41 244

原创字体在chrome浏览器下最小只能设置成12px的解决办法

在这一年的工作中，我发现很多问题你利用自己的「聪明才智」绕过去了，总有一天它会和你不期而遇，今天我们就来直面一个字体兼容性的小问题：Chrome谷歌浏览器下不支持css字体小于12px。我们先来看个效果图（chrome下）：给你看个栗子.png 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时，显示的都是一样大小，都是默认12px；那么网上有一个方法就是给当前样式添加Chrome私有属性：-webkit-text-size-adjust:none; 可是我进行验证后发现并无

2020-11-19 14:35:18 859

原创 Javascript基本数据类型

JavaScript 基本数据类型 String类型字符串属性和方法字符串属性字符串方法 Number类型算术运算符赋值运算符比较运算符逻辑运算符 Boolean类型 Undefined类型 Null类型类型判断 String类型字符串是存储字符（比如 “Keafmd”）的变量。字符串可以是引号中的任意文本。可以使用单引号或双引号。 1 2 3 字符串属性和方法原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。原始值可以使用 JavaScript 的属性和方法，

2020-11-19 13:47:54 122

转载 Web相关面试题

1,判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20 var 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的efg var str = “abcdefg”; if (/efg/.test(str)) {/判

2020-11-19 11:22:17 2530

原创 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 549

原创优雅降级与渐进增强

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给; b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要; c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带; ...

2020-11-18 13:01:17 350 4

原创 css优先级

1.CSS优先级比较！important > 内联样式 > id > class > 标签 > 通配符 > 继承 > 默认 2.CSS权重计算我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。 4个等级的定义如下：第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#co

2020-11-18 13:00:10 112

原创前端面试题个人总结

基础：（我基础太差，恶补了一段时间，还是不行。。。。所以，就算上班了，还是要看看基础，不能专顾手头的工作） html：关于html，会问一下html5新增了哪些特性，又淘汰了哪些特性。增加：查阅 http://www.w3school.com.cn/html5/html5_reference.asp 1、音频（之前做微信H5动画比较多，音频算是比较常用的） 2、视频（同上，关于微信H5，它提供了很多参数，查阅 https://www.jianshu.com/p/ad2c0057d0ff ） 3、canv

2020-11-18 12:59:08 170

原创行内与块级的细节区别

一，下面从概念的角度来说一下块级元素和行内元素 1.块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素 2.行内元素：也叫做内联元素，一般都是语义级别的基本元素，内联元素已办只能容纳文本或者其他内联元素。块元素（block element）和内联元素（inline element）都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。而当加了css控制以后，块元素可以变为内联元素，内

2020-11-18 11:42:03 255 2

原创一个HTML 导航栏下划线跟随效果

一个HTML 导航栏下划线跟随效果这几日学习html，一直在B站乱逛，发现网站的动效做的真好。然后翻到了这一页：点此查看上面的导航栏是一个下划线跟随的效果。由于有一个初始的选项（当前页面对应标签保持蓝色），鼠标划过时除了高亮项下面的下划线也要跟随。如果只实现前面这些效果可以用css完成，但是其实这里面的下划线是一个动画效果，仔细观察发现下划线相当于在border-bottom上面做水平运动，切换标签时有一个过渡效果，因此实际上这个下划线其实是一个独立的bar滑块结构定义如下：复制代码综合视

2020-11-18 11:26:00 689

原创前端开发-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 300

原创如何清除浮动

为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题，如下图，红色边框为父元素，在子元素为浮动后无法被撑开了在这里插入图片描述清除浮动的方法 1.额外标签法在最后一个浮动标签后，新加一个标签，给其设置clear：both； 2.父级添加overflow属性父元素添加overflow:hidden 补充：这个方法的原理是通过触发BFC方式，实现清除浮动 BFC 全称为块格式化上下文 (Block Formatting Context) 。他有以下两个特性： 1.

2020-11-18 11:03:44 984

原创清除浮动及其原理

清除浮动的三种方式及其原理浮动元素的特性浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动元素带来的问题因为浮动元素脱离文档流，所以对于其处于正常文档流中父元素，无法获知其高度，导致父元素自身的高度塌陷（失去浮动元素占据的高度）。清除浮动的三种方式设置float son div 1 2 3 overflow:hidden; 使用overflow:hidden 清除浮动 1 2 3 其中，zoom:1;用于兼容IE6。 clear:both

2020-11-18 10:54:52 612

原创算法

冒泡排序思路：俩俩交换，大的放在后面，第一次排序后最大值已在数组末尾。因为俩俩交换，需要n-1趟排序（比如10个数，需要9趟排序）代码实现要点：两个for循环，外层循环控制排序的趟数，内层循环控制比较的次数。每趟过后，比较的次数都应该要减1 选择排序思路：找到数组中最大的元素，与数组最后一位元素交换。当只有一个数时，则不需要选择了，因此需要n-1趟排序代码实现要点：两个for循环，外层循环控制排序的趟数，内层循环找到当前趟数的最大值，随后与当前趟数组最后的一位元素交换插入排序思路：将一个元素插入

2020-11-18 10:52:33 90

原创标准盒子

盒模型的组成，由里向外分别是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 288

原创 flex布局: 一行显示固定个数,强制换行且均匀分布

在这里插入图片描述如图需求: 一行显示3个强制换行宽度不写死高度固定 – html 1 2 3 4 5 6 7 8 9 ---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 3650

原创 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 405

原创 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 945

原创 Vue中native的用法

Vue中native的用法 native native在Vue.js官方的大致意思是监听自定义标签根标签的事件，将原生事件绑定到组件上，比如a标签可以直接绑定原生事件，但是如果你通过自定义封装了button标签，起成了名字myself-abutton，这时候绑定事件就需要加上native了，下面写一个简单的例子方便理解：例子四个按钮，分别是普通标签不加native和加native，自定义标签不加native和加native <!DOCTYPE html> <html>

2020-11-13 14:47:24 724

原创原生JS实现淡出淡入效果

前言一提到淡入淡出效果，大家可能会想到jQuery的fadeIn(),fadeOut()和fadeToggle()函数，它们被封装到库中，很方便被调用。但是有时候只为了一个简单的淡入淡出效果，并不需要去调用庞大的jQuery库，所以，下面我们用纯js代码实现淡入淡出的效果。需求分析要实现淡入淡出效果，就是要使用到setInterval()函数，改变element节点透明度opacity，来解决这个问题。功能实现 fadeIn()和fadeOut()都有三个参数，分别是事件（必填），淡入淡出

2020-11-12 17:45:03 2720 2

原创 vue如何实现滑动到指定位置

在Vue中，有三种方式可以实现H5页面滑动至指定位置方法1： //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('targetbox'); this.target= targetbox.offsetTop; }) }) } //.

2020-11-12 16:43:50 1110

原创 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 3200

原创 toString方法

Number，boolean，object和字符串值都有一个toString方法 toString可以输出以二进制，八进制，十六进制表示的字符串值 var num=10； alert（num.toString()); "10" alert(num.toString(2)); "1010"

2020-11-08 15:29:46 498

原创 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 175

原创 ES6之const

定义常量在ES5中定义一个常量： Object.defineProperty(window,'PI',{ value:3.14, writable: false }) console.log(PI)//3.14 PI=5 console.log(PI)//3.14 1 2 3 4 5 6 7 在ES6中定义一个常量 //典型报错 const a=5 a=6//报错,常量不可以改变 const b//报错，常量必须赋初始值 b=6 //const声明的数组、对象

2020-11-07 01:17:41 156

原创 js实现一个函数判断输入字符串是否为回文

题目：实现一个函数，这个函数可以用来判断输入字符串是否为回文。忽略大小写，如Helleh，王中王等。首先解这题的首要问题是理解回文这个概念，回文的定义是把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情趣，叫做回文，也叫回环。分析： 1）既然知道了回文的概念，那么我们很明显的知道这题需要遍历，也明白遍历到回文中间的那个字符的对应索引就可以了 2）然后对前面一半遍历的字符与后面遍历的一半字符进行比较，如果相同就是回文；如果不同就不是回文 3）可是到底该怎么实现遍历前一半字符和后面一

2020-11-07 01:09:01 2027

转载面试技巧

业洞察丨作者 / 刘润整理 / 由之面试，是找到好工作的过程中，最最重要的一环。在我14年的职业生涯中，亲自面试的人应该不下1000人了。看过的简历还要更多，尤其是微软上海早期扩张的时候。所以今天，我就从自身经历出发，给你分享一些面试经验。 — 1— 定制化面试面试中最重要的一条心法，就是详细了解对方，匹配自己优势，然后定制化面试。想象一下，明天你要和心仪的女生第一次下午茶约会了，你会做哪些准备呢？你会研究对方喜欢喝什么，是喜欢喝茶还是咖啡？喜欢星巴克？还是更小众有特色

2020-11-06 09:31:06 232

原创 Promise

描述一个Promise对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个promise，以便在未来某个时候把值交给使用者。一个Promise必然处于以下几种状态之一：待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。已兑现（fulfilled）: 意味着操作成功完成。已拒绝（rejecte...

2020-11-06 09:14:16 633

原创关于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 1610 1

原创 nextSibling和nextElementSibling的区别

nextSibling返回其父节点的childNodes子节点列表中紧随其后的节点nextElementSibling返回的则是其父节点的childNodes子节点列表中紧随其后的元素节点previousSibling和previousElementSibling类似 DOM 节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 1. 整个文档是一个文档节点，节点类型：9 2. 每个 HTML 元素是元素节点，节点类型：1 3. HTML 元素内的文本是文本节点，节点类型：

2020-11-04 13:21:27 1190

空空如也

空空如也