- 博客(83)
- 收藏
- 关注
RSS订阅原创 css相对单位和绝对单位
css长度单位分为 相对长度 和 绝对长度1.相对长度相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设配相对长度更加适用。单位 描述 em 它是描述相对于应用在当前元素的字体尺寸，所以它是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px ex 依赖于英文字母小x的高度 ch 数字0的宽度 rem rem是根(root em)的缩写，相对于根元素字体大小（相对的只是HTML根元素）； vw viewpoi
2021-05-24 11:13:00
2584
原创 margin塌陷和margin合并
margin塌陷什么是margin塌陷父子元素在垂直方向的margin，父子元素是结合在一起的，他们两个的margin会取两者的最大值，正常情况下，父级元素相当于浏览器定位，子级元素相当于父级元素进行定位，但由于margin塌陷，父级相当于浏览器定位，而子级没有相对父级定位，这就是margin塌陷例子： <div class="father"> <div class="son"></div> </div> &l
2020-09-11 16:47:33
160
原创 css元素水平垂直居中的几种方法
1.元素水平居中水平居中最好用的就是 margin: 0 auto居中没有效果的原因1.元素没有设置宽度，没有宽度，肯定是无法居中的2.设置了宽度仍然无法居中，你设置的是行内元素，只有是块级元素才有用实例：<div class="father"> <div class="son"></div> </div> <style> .father{ height: 300px; w.
2020-09-11 14:24:03
228
原创 li之间有空隙，怎么解决
原因:浮动后li之间的的空隙是空白字符造成的1.删除所有的换行符 <ul> <li>学生</li><li>老师</li><li>校长</li> </ul>2.可以将li的标签不闭合. <ul> <li>学生 <li>老师 <li>校长 </ul>3.可以设置负边距. 不过负边
2020-09-11 10:28:59
663
原创 css选择器及权重
css选择器及权重 1.id选择器 #first 选择id="first" 的所有元素 2.类选择器 .first 选择class="first"的所有元素 3.属性选择器 [target] 选择带有 target 属性所有元素。 4.标签选择器 p 选择所有p标签 5.通配符选择器 * 选择所有元素css选择器权重(256进制)!important 无穷大行间样式
2020-09-11 09:48:49
149
原创 html5新增标签
常用标签：article： 定义独立的内容。aside：定义 article 标签外的内容。footer：标签定义文档或者文档的一部分区域的页脚。header：标签定义文档或者文档的一部分区域的页眉。nav：标签定义导航链接的部分。section： 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。audio： 标签定义声音，比如音乐或其他音频流。video：标签定义视频，比如电影片段或其他视频流。canvas： 标签通过脚本（通常是 JavaScript）来绘制图形（比如
2020-09-11 08:52:32
82
原创 js实现对象深度克隆的两种方法
1.递归法//深度克隆 var obj = { name: "shishuo", age: 20, wife: { name: "xiazixi", age: 20 } } function deepClone(origin,target){ for(var prop in obj){ if(origin.hasOwnProperty(prop
2020-09-08 18:07:26
1100
原创 面试题总结（2020-9-8）
1.排序稳定的算法有：冒泡排序，插入排序，基数排序，归并排序2. 以下单词不属于javascript关键字的是：A:withB:voidC:parentD:class正确答案是 C3.把鼠标移到按钮并点击，会产生一串什么样的事件把鼠标移到按钮并点击时，会产生一串hover->focus->active (悬停->聚焦->响应)事件。4. function s(ary){ ary[0] = ary[2] } function bar(a
2020-09-08 16:03:55
298
原创 8大排序算法的稳定性和时间复杂度
什么是稳定性：通俗地讲就是能保证排序前2个相等的数其在序列的前后位置顺序和排序后它们两个的前后位置顺序相同。在简单形式化一下，如果Ai = Aj，Ai原来在Aj位置前，排序后Ai还是要在Aj位置前。（1）直接插入排序：一般插入排序，比较是从有序序列的最后一个元素开始，如果比它大则直接插入在其后面，否则一直往前比。如果找到一个和插入元素相等的，那么就插入到这个相等元素的后面。插入排序是稳定的。（2）希尔排序：希尔排序是按照不同步长对元素进行插入排序，一次插入排序是稳定的，不会改变相同元素的相对顺序，
2020-09-08 14:58:45
1200
原创 js 手写 ajax
ajax 在我们的开发工作中已经司空见惯，几乎所有我们频繁使用的库和框架都提供了经过完善封装的ajax方法，如jQuery，zepto，angular等等，这使得我们的数据请求都变得异常简洁明了但是这也带来了很明显的缺陷，就是我们知道如何区使用封装后的ajax，却不会通过原生的js来写ajax这次就亲手实现以下原生js的ajaxXMLHttpRequest对象我们常用的ajax就是用过XMLHttpRequest对象实现的。这个对象有很多的属性和事件，在使用之前，我们需要将它实例化 const
2020-09-07 10:51:16
823
原创 DOM 中attribute 和 property的区别
Attribute vs Property第一个问题：什么是 attribute & 什么是propertyattribute是我们在html代码中经常看到的键值对，例如 <input id="the-input" type="text" value="Name:" />上面代码中的 input 节点有三个 attribute：id：the-inputtype：textvalue：Name:property是attribute对应的DOM节点的对象属性 ,例如
2020-09-07 09:41:53
819
2
原创 何时需要使用beforeDestroy
理解:可能在当前页面中使用了 $on 方法，需要在组件销毁前解绑。清除自己定义的定时器解除事件的绑定 scoll mousemove …
2020-08-22 09:35:39
3120
原创 ajax请求放在哪个生命周期中
理解：在 created 的时候，视图中的dom并没有渲染出来，所以此时如果直接去操作dom节点，无法找到相关的元素在 mounted 中，由于此时 om 已经渲染出来了，所以可以直接操作dom节点。一般情况下都放到 mounted 中，保证逻辑的统一性，因为生命周期是同步执行的，ajax 是异步执行的。由于服务段渲染不支持 mouted 方法，所以在服务端渲染的情况下统一放到 created 中...
2020-08-22 09:15:58
1618
转载 浅析vue.nextTick原理
目录什么是vue.nextTick()这篇文章的基础是js的event loop(事件循环)，还不熟悉事件循环机制的可以看下这篇博客event loop什么是vue.nextTick()vue.nextTick()是
2020-08-21 09:43:26
575
原创 全面理解 JS的 event loop(事件循环机制)
目录JavaScript是单线程执行栈、任务队列同步任务、异步任务、宏任务、微任务setTimeout（）、setInterval（）Promiseprocess.nextTicksetImmediate优先级代码解析先看段代码：console.log(1) setTimeout(function() { console.log(2) new Promise(function(resolve, reject) { console.log(
2020-08-20 12:08:51
328
原创 vue为什么采用异步更新
vue为什么要采用异步更新前言首先要明确一点：vue是组件级更新,也就是说，每一次的更新都是渲染整个组件，如果是同步的话，一旦修改了data属性，便会触发对应的 watcher，然后调用对应 watcher 下的 update 方法更新视图，那么结果显而易见，太频繁了 ！如下代码：data(){ a:1, b:2, c:3}//如果是同步的话 修改data中的属性 //this.a = 2;this.b = 3;this.c = 4; 这样会调用三次update方法渲染视图,很耗性
2020-08-15 11:31:57
2277
原创 vue中子组件向父组件传值---vue学习
vue中子组件可以向父组件传值，以下介绍具体方法 <div id="app"> <com @parentshow="show"></com> </div> <template id="temp"> <div> <h1>这是子组件</h1> <input type="button" @click="func" value="点击"> </div>
2020-06-29 22:16:22
216
原创 vue中父组件向子组件传值--vue学习
vue中，父组件可以向子组<div id="app"> <com :parentmes="mes"></com> <!-- 父组件向子组件中传递数据,使用v-bind指令传递 --> </div> <script> var vm = new Vue({ el:"#app", data:{ mes:"这是父组件中的值" }, components:{ com:
2020-06-29 22:07:11
118
原创 document.compatMode的CSS1compat
文章目录document.compatMode前端面试题：document.compatModedocument上有一个compatMode属性, “compatMode” , 中文是兼容模式的意思document.compatModeBackCompat：标准兼容模式关闭。浏览器宽度:document.body.clientWidthCSS1Compat：标准兼容模式开启。 浏览器宽度:document.documentElement.clientWidth前端面试题：完成函数 getVie
2020-06-04 11:44:10
312
原创 深入Array.prototype.slice()方法
"slice"英文是 片 的意思，顾名思义，slice方法是将数组切片,即返回原数组的一部分slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。 var arr = [4,2,7,0,1,6] arr.slice(1,3) //[2,7] arr.slice() //[4,2,7,0,1,6] arr.slice(1) //[2,7,0,1,6]
2020-05-29 12:01:04
655
原创 使用递归实现扁平数组
完成一个函数,接受数组作为参数,数组元素为整数或者数组,数组元素包含整数或数组,函数返回扁平化后的数组如：[1, [2, [ [3, 4], 5], 6]] => [1, 2, 3, 4, 5, 6]代码如下: var result_arr = [] function demo(arr){ arr.forEach(function(item,index,arr){ if(Array.isArray(item)){ //需要注意Array.i
2020-05-28 17:28:38
343
原创 判断一个对象是否是数组的方法
判断一个对象是否是数组,最高效的方法是使用Array.isArray()方法,但是此方法不兼容 IE6–IE8,所以想要在任何浏览器上都能判断数组,就要进行改进以下是改进后的代码，适用于任何浏览器 function is_Array(obj){ if(Array.isArray){ return Array.isArray(obj) } return typeof obj === "object"&&Obj
2020-05-28 11:39:34
433
转载 前端面试题最全汇总
前端面试题汇总最近在github上找到一个前端面试题的合集,每一个问题出现的频率都很高转载自: https://github.com/qiu-deqing/FE-interviewFE-interviewHTML， HTTP，web 综合问题常见排序算法的时间复杂度,空间复杂度前端需要注意哪些 SEOweb 开发中会话跟踪的方法有哪些<img>的title和alt有什么区别doctype 是什么,举例常见 doctype 及特点HTML 全局属性(global attr
2020-05-16 09:56:12
308
原创 map()和filter()深度详解
数组的<code>map()</code>和<code>filter()</code>方法使用频率非常高,两者用法极其类似<code>map()</code>方法 “map” 映射的意思,用法和forEach类似,callback(回调函数)的参数也一样[].map(function(item,index,arr){}) map方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组...
2020-05-15 18:47:51
836
原创 前端面试----第2天
文章目录[html]:请列举常用的块级元素和行级元素[css]:css3有哪些新增的特性?[JS]:写一个方法去除字符串中的空格[html]:请列举常用的块级元素和行级元素[css]:css3有哪些新增的特性?[JS]:写一个方法去除字符串中的空格...
2019-12-14 12:07:59
103
原创 前端面试题----第1天
文章目录[HTML]link和@import的区别[CSS]圣杯布局和双飞翼布局[JS]用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值[HTML]link和@import的区别1.link是HTML标签，@import是css提供的2.link没有浏览器兼容性问题，@import不兼容ie5以下3.link可以使用js操作DOM动态引入或去除样式，@import不...
2019-12-12 19:38:35
157
1
原创 数组的扩展----ES6学习笔记
文章目录1.扩展运算符1.1扩展运算符的应用2.Array.from()3.Array.of()4.数组实例的find()和findIndex()5.数组实例的fill()6.数组实例的entries()，keys()，和values()7.数组实例的includes()1.扩展运算符含义：扩展运算符是三个点(…)，用于将一个数组转为用逗号分隔的参数序列，主要用于函数调用。 functi...
2019-12-11 18:00:05
115
原创 Set数据结构----ES6学习笔记
1.数组去重function onlyarr(arr){return […new Set(arr)];}function onlyarr(arr){return Array.from(new Set(arr));}2.字符串去重function onlystr(str){return […new Set(str)].join("");}function onlystr(str...
2019-12-10 20:59:20
119
原创 js实现别踩白块
文章目录html部分：css部分：javascript部分:html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
2019-12-06 16:38:24
278
原创 箭头函数----ES6学习笔记
箭头函数简介:ES6允许使用箭头 => 定义函数。 let demo = value => value+1; //等同于 function demo(value){ return value+1; }如果函数没有参数或者有多个参数，要使用圆括号()，如果函数体有多条语句，要使用大括号{ }。 //无参数 let demo = (...
2019-12-01 21:14:01
124
原创 js中 this问题
先看一张规则图判断时间是函数执行的时候总结规则：1.如果使用了new语句，那么this就指向新创建的对象。 function Person(){ this.age = 20; this.sex = "man"; this.name = "xiaoq"; console.log(this); } var people ...
2019-12-01 20:17:41
115
原创 js typeof的所有返回值
typeof的所有返回值1. " number "2. " object "3. " string "4. " boolean "5. " function "6. " undefined " 一些特殊的返回值表达式返回值typeof NaN" number "typeof undefined" undefined "typeof null"...
2019-12-01 11:49:21
185
原创 js中布尔值为false的六种情况
以下6个值转换为布尔值为false。1. undefined2. false3. 04. “”(空字符串)5. null6. NaN除了以上6个值，其余所有值转换为布尔值都为true。
2019-12-01 11:39:10
1816
原创 rest参数----ES6学习笔记
ES6新增了rest参数，使用形式(…变量名),用于接收函数多余的参数(这样就可以不用使用arguments对象了)，与rest参数搭配使用的变量是一个数组，函数多余的参数会放进这个数组中。 function demo(...values){ let sum=0; for(let i of values){ sum +=i; ...
2019-11-30 12:18:20
171
原创 如何在博客中添加目录
目录:1.如何在博客中添加目录2.如下图2.1实现截图2.2效果图1.如何在博客中添加目录在文章开头加上 @[toc] (目录名)即可。2.如下图2.1实现截图2.2效果图...
2019-11-28 17:12:32
385
原创 Symbol----ES6学习笔记
ES5中有6种数据类型：Number(数值)，String(字符串)，Boolean(布尔值)，Object(对象)，undefined，null。ES6新引入了一种数据类型(Symbol)：ES5中对象的属性名都是字符串类型，这样可能会导致属性名的冲突，比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。这时使用S...
2019-11-25 12:41:45
95
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人