GAARA

设置子盒子的内外浮动并消除父盒子的浮动影响(重点)1.考点:子元素设置浮动后造成父元素高度塌陷,怎么解决?一.父元素设置固定高度二.在设置浮动的子元素后面创建一个空盒子撑住高度三.用伪元素::after的方法设置空盒子四.父元素设置overflow:hidden;

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；<mark>计算BFC的高度时，浮动元素也参与计算。</mark>

0.什么是位移运算符?位移运算符按照平移的方向和填充数字的规则分为三种:* > 带符号右移运算符* >>> 不带符号右移运算符1…左移运算符定义就是按照二进制的形式,把所有的数字向左移动对应的位数,高位移出,低位补零语法[需要移位的数字]

文章目录定义语法使用场景一:点击改变input文本框成为一个button按钮代码改进:value也用setAttribute设置使用场景二:使用setAttribute()方法取消类名使用场景三:使用setAttribute()方法和getAttribut()方法,解决for循环中无法获取自增中的i的bug定义setAttribute()方法是用于创建或者改变元素的某个新属性(若指定属性已经存在,那么仅仅设置其属性值)语法element.setAttribute(name,valu

1.嵌套(>):快速生成父子结构的HTML示例:输入ul>li,回车/tab2.并列(+):生成并列结构的HTML示例:输入p+div,tab3.重复(*):生成相同的HTML结构4.返回(^):生成父元素的兄弟元素HTML结构示例:ul>li*3^p5.分组(()):括号包起来代表这是一组元素示例:(ul>li*3)+p6.属性一(#和.):"#"代表生成一个id,"."代表生成一个class示例:div#header+div.container7.属性二([]和{}):"[]"用于

一.npm1.定义npm全程是NodeJS Package Manager,即Nodejs包管理器,它是和Node一起安装的2.用途从npm服务器下载上面的包或者命令行程序到本地把自己写好的包或命令行上传到npm服务器供别人使用3.安装npm无需特意安装,会在安装node时一起安装好更新升级到最新版:sudo npm install npm@lastest -g在Windows下升级版本:npm install npm -g查看当前版本:npm -v如何使用npm命令安装依赖模块

文章目录0.结论1.事件冒泡是自下而上执行2.事件捕获是自上而下执行3.同一元素上同时绑定多个事件时会先执行冒泡还是捕获?会执行几次?代码结果4.使用事件委托解决新插入的子标签没有绑定上事件的情况0.结论执行顺序:先捕获再冒泡执行次数:绑定了几个事件就执行几次即:祖先元素的捕获事件>点击元素的捕获事件>点击元素的冒泡事件>祖先元素的冒泡事件1.事件冒泡是自下而上执行示例,略2.事件捕获是自上而下执行示例,略3.同一元素上同时绑定多个事件时会先执行冒泡还是捕获?会执行几次

文章目录0.回顾sort()的用法示例一:对字符数组进行排序示例二:对数字数组进行排序1.sort()无法对由两位数以上的数组元素构成的数组进行合理排序示例出现原因和解决方法2.sort()的参数——比较函数示例:使用比较函数将数字数组进行正确排序比较函数的参数比较函数不能对混搭(字符+数字)数组进行排序3.对于由对象构成的数组,如何排序?需求解决方法:使用比较函数改进一:此时只能针对age属性进行排序,把age也替换成形参,写法如下改进二:让比较函数可以使用 属性值是数字型字

一.圣杯布局1.圣杯布局的效果和要求效果要求2.圣杯布局的实现方式[重要]2.1.使用浮动实现圣杯布局思路代码效果2.2.使用弹性盒实现圣杯布局思路代码效果2.3.使用定位实现圣杯布局思路代码2.4.使用网格布局grid实现圣杯布局思路代码二.双飞翼布局1.双飞翼布局的效果和要求效果要求2.圣杯布局和双飞翼布局的区别[重要]一.圣杯布局1.圣杯布局的效果和要求效果在这里插入图片描述要求头部和底部固定高度,宽度占100%中间的container是一

文章目录1.什么是行内块元素?2.为什么行内元素之间会出现空白间隙?问题示例出现原因3.解决方法3.1.方法一:html中行内标签写在同一行中,不换行3.2.方法二:改变html中行内标签换行的字符3.3.方法三:在行内标签之后使用注释3.4.方法四:设置行内元素的水平margin值为负值3.5.方法五:给行内元素的父元素设置font-size:03.6.方法六:父元素的letter-spacing设置为负值3.7.方法七:给行内元素设置浮动1.什么是行内块元素?元素设置disp

文章目录一.常见两列布局(左栏固定宽度,右栏自适应)写法一:左边设置固定宽度并浮动,右边自适应写法二:flex布局二.常见三列布局(部分固定宽度,部分自适应)1.浮动布局;两边固定宽度并左右浮动，中间自适应2.所有子元素都左浮动,且两边定宽，中间自适应3.行内块级显示--给每一块元素设置为行内块级元素4.父元素：display:flex,子元素全部flex:1;为flex：1，1，0%。自适应5.父元素flex布局+左右定宽+中间元素flex:1;6.绝对定位一.常见两列布局(左栏固定

一.vue项目打包并部署到nginx服务器(window环境)1.项目打包对于通过vue-cli脚手架创建的项目在根目录cmd,并输入打包命令2.nginx的html文件夹下粘贴打包好的项目文件3.在有nginx.exe的页面cmd,输入命令开启服务器4.其他把dist文件中的文件粘贴到HTML文件夹下面配置nginx配置结束后重新加载二.使用宝塔面板部署vue项目1.宝塔面板介绍

一.服务器介绍1.服务器和PC电脑的区别2.获取服务器3.常见服务器分类4.使用服务器的步骤(阿里云)二.正向代理,反向代理,负载均衡和动静分离1. 什么是正向代理?2.什么是反向代理?3.什么是负载均衡?4.什么是动静分离?三.nginx服务器0.介绍和常见用途1.nginx官网和下载2.安装和启动3.常见命令

一.进程和线程【了解】1.什么是进程?2.什么是线程?3.进程和线程的区别4.浏览器内核定义主要流程构成主流浏览器的浏览器内核二.单线程和多线程1.什么是单线程?2.什么是多线程?3.如何理解javascript是单进程的?三.同步任务和异步任务1.同步任务（synchronous,经常简称为sync）2.异步任务（asynchronous,经常简称为async）四.任务队列和执行栈以及事件循环【重点】1.什么是执行栈（execution context stack）?2

sync的一个使用场景element-ui 的dialog对话框示例代码中:https://element.eleme.cn/#/zh-CN/component/dialog 这是一段信息

文章目录介绍出现背景sync的一个使用场景介绍出现背景sync的一个使用场景element-ui 的dialog对话框示例代码中:https://element.eleme.cn/#/zh-CN/component/dialog 这是一段信息

1.window,html,body和document的定义htmlbodywindowdocument2.window,html,body和document的区别3.document.body 和 document.documentElement的区别4.document.body.clientWidth、document.documentElement.clientWidth和window.innerWidth的区别示例结论5.复习:BOM和DOMBOM(Browser Objec

1.定义自执行函数也叫立即调用函数,具有自执行,即定义后立即调用的功能2. 格式写法一:(function(){ console,log("hello world");})();写法二:(function(){ console,log("hello world");}());第一种写法比较常用,第二种写法比较合理3.()里面只能是表达式JS中()里面不能包含语句,只能是表达式,因此解析器在解析到function关键字时,会把它们当做function表达式,而非函数声明

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.messa

文章目录一.CSS3新增选择器属性选择器结构伪类选择器伪元素选择器示例:使用::after给元素加一个遮罩层二.nth-child和nth-of-type的区别区别示例结果分析参考文档一.CSS3新增选择器属性选择器E[att]:具有att属性的E元素E[att=val]:具有att属性且值为val的E元素E[att^=val]:具有att属性且值以val开头的E元素E[att$=val]:具有att属性且值以val结尾的E元素E[att*=val]:具有att属性且值包含

0.前言1.设置flex布局后的父子元素2.容器(父元素)的属性3.项目(子元素)的属性4.示例一:flex布局实现flex容器中子元素的水平垂直居中5.示例二:flex:1实现子元素平分flex容器宽度6.示例三:换行,多行布局7.示例四:flex-grow,flex-shrink和flex-basis属性的使用7.1.flex-grow的使用7.2.flex-shrink的使用7.3.flex-basis与width和min-width,max-width的区别7.4 flex-b

文章目录1.事件流2.事件冒泡3.事件捕获4.阻止冒泡5.事件委托6.DOM0级事件和DOM2级事件7.一个DOM同时绑定事件冒泡和事件捕获会输出什么?8.使用事件委托解决新增节点没有绑定上事件问题1.事件流JS事件:用于HTML和JavaScript之间的交互事件流:事件传播的过程DOM中完整的事件流包括三个阶段:事件捕获阶段,目标阶段,事件冒泡阶段(注意中间的目标阶段不要记成事件委托阶段)事件通过捕获到达目标元素,这个时候就是目标阶段,从目标节点元素将事件上传到根节点的构成阶段

文章目录一.数组方法和数组遍历1.unshift/shift,pop/push方法2.some和every方法3.slice和splice方法3.1.数组arr.slice(start,end)方法不会改变原数组而是返回一个子数组3.2.数组arr.splice(index, n, item1,...itemx)方法会改变原数组语法[重要] splice方法可以删除，添加，替换4.concat方法5.使用forEach和for..in遍历数组二.字符串方法1.substr和subst

Promise 构造函数时同步执行的，then 方法是异步执行的

1.定义: 设计模式是一套多人知晓,经过分类,反复使用的代码设计经验的总结2.使用目的:(软件工程的基础知识点) 增加代码的复用性,易读性,可靠性 使代码的编写真正的工程化3.种类(23种): 工厂模式,抽象工厂模式,原型模式, 单例模式,组合模式,观察者模式,代理模式,适配器模式, 构造器模式,迭代器模式,模块化模式,暴露模块模式,中介者模式,命令模式, 外观模式,Mixin模式,装饰模式,亨元(Flyweight)模式,MVC模式,MVP模式,MVVM模式,惰性

object.create和new的区别最明显的区别是两者对__proto__属性的操作不同,Object.create是手动设置的,使用一个现有对象来作为的__proto__(实例对象的原型对象),new创建的实例对象,其__proto__会自动指向其构造函数的原型对象new创建的实例对象会继承构造函数的属性和方法,Object.create创建的实例对象不包含属性和方法,要通过第二个参数来给新对象添加新属性

0.object.create分类一:不使用Object.create的继承1.原型链继承原理:给原型对象增加一层指向优缺点格式和示例2.构造函数继承原理:使用bind改变某个功能的this指向从而实现继承优缺点格式和示例3.组合继承(原型链+构造函数)原型链继承和构造函数继承的缺点组合继承的原理改变this指向+原型对象优缺点语法和示例分类二:使用Object.create的继承4.原型式继承定义优缺点语法和示例:原型式继承是浅拷贝使用Object.create进行

1.none 默认值，没有效果。2.blur(px) 给图像设置模糊度,(值是css长度值)值越大越模糊；3.brightness(%) 给图像设置亮度,(值是百分比)值越大越亮；4.contrast(%) 给图像设置对比度。(值是百分比)百分比越高，对比度越明显,如果值是0%时，元素只有浅灰5.opacity(%) 给图像设置透明度。(值是百分比)值越小越透明四.filter:alpha()属性基本属性filter：alpha（opacity，finishopacity，style，star

知识点z-index:当前css盒子放在其他盒子之上或之下css3的filter用法元素的拖拽核心代码:left值=eveDown.clientX-eveMove.offsetX(减去div的资深宽高可以让鼠标保持在元素正中间显示)-cursor的属性值:pointer（小手）、auto（I）、default（箭头）、crosshair（十字交叉）、move（移动）、wait（转圈）、help（？）

1.bind,call和apply的共同点:1.1.第一个形参改变当前this指向,第二个(以及之后的)形参用来传参1.2.三者只有格式的不同,功能是相同的2.bind,call和apply的不同点:2.1.bind需要执行语句(在后面额外加括号),call和apply是自执行2.2.bind和call第二个(和之后的)形参用来传参,apply的第二个参数是一个数组2.3.bind和call第二个参数可以是arguments,而apply不可以—————————————

问题引出:频繁调用函数造成性能浪费当一个函数无意义的高频率调用时,需要设置函数函数防抖和函数节流,限制这种无意义的调用,通过调用次数的减少来提高代码性能问题场景:搜索框实时发请求，onmousemove, resize, onscroll等等1.input搜索框内容的输入:用户敲击键盘的时候去触发一个函数2 resize,变化浏览器的大小,控制台会一直打印3.拖动滚动条,会持续触发onscroll监听事件4.鼠标移动事件中不断返回鼠标经过的位置解决方法:函数防抖和函数节流思路:不影响使用的

语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法,使操作变得更加清晰方便,更符合编程习惯通俗理解就是一种便捷写法,去掉不用也不影响语言的表达,因为处理程序本身就会把语法糖构建转换成更加基础的构件

文章目录零.Promise1.什么是Promise?2.使用Promise有什么好处?3.pending,fullfilled和rejected是什么?3.resolved和rejected是什么?4.then和catch是什么?3.Promise的基本用法零.Promise1.什么是Promise?Promise是JS中进行异步编程的一种新的解决方案,(旧方案是单纯使用回调函数)语法上,Promise是一个对象,从Promise对象可以获取异步操作的消息2.使用Promise有什

用法一:.检测第一个运算数是否是第二个运算数(对象)的属性名 var obj = { x: 1, y: 2 }; console.log("x" in obj, "y" in obj, "z" in obj); //true true false用法二:检测第一个运算数是否为第二个运算数(数组)的索引var arr = [1, 2, [3, 4], 5];console.log(1 in arr, 2 in

1.instanceof运算符用法一:instanceof返回一个布尔值,表示对象是否为某个构造函数是的实例function Person() { this.age = 18};var p = new Person();console.log(p instanceof Person);//true;instanceof左边是实例对象，右边是构造函数它会检查右边构造函数的原型对象是否在左边对象的原型链上,即console.log(Person.prototype.isPrototypeOf(p))

2.instanceOfinstanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例var obj = {name: "zhangsan"};var arr = [1, 2, 3];console.log(arr instanceof Array); //trueconsole.log(arr instanceof Object); //true(万物皆对象)console.log(obj instanceof Array); //falseconsole.log(obj in

深拷贝&浅拷贝以及实现深拷贝的四种方法:补:遍历和… //浅拷贝 var obj1 = { age: 18 }; var obj2 = obj1; obj2.age = 20; console.log(obj1.age); //深拷贝 //1.Object_assign //1.1.Object.assign用法1:(三个)错误格式:object_assgin var obj3 = { num2: 2, num3: 4 };

1.使用ES6的SET方法写法一写法二2.使用双层for循环写法一写法二3.查重,若无重复就push进空数组写法一:arr[i] == array[j]写法二:indexOf写法三:includes4.利用对象的唯一性5.使用map去重知识点

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全

一.指定媒体设备的方法1.在style标签中指定媒体设备2.使用link标签设置媒体类型3.使用@import简化多文件引用二.@media的使用4.样式表中使用@media局部定义响应查询5.逻辑与条件判断响应式使用:and6.逻辑或条件判断响应式使用:,(逗号)7.逻辑非条件判断响应式使用:not8.使用only排除底端浏览器(不常用)三.响应式布局的应用示例9.@import引入css文件的顺序要注意10.示例:navbar导航条的打底布局最终效果代码