JS 问题New操作符做了什么？解释一下原型？闭包、闭包函数、闭包的特点？js内置对象？检查数据类型的方式？Js中的Object. defineProperty？Call apply bind的作用、区别、以及应用场景？Map、foreach、forin、forof？var、let、const？数组的常见方法？Math常见方法？数组去重的几种方式？如果数组中的数据是对象呢？数组的最大最小值的几种方法？函数节流与防抖的概念？ES6新特性？ES6对象新增的方法？函数、方法、类以及如何添加属性和方法？ES5与ES6继承的区别？类和函数Class和function的区别？promise？async，await？Set，map，weakset，weakmap区别？装箱和拆箱？内存泄漏的几种情况？Json和xml？浅拷贝深拷贝？Js操作dom的方法？Js中的变量(主要解释var和let定义变量的区别)？Js中display和visibility？答案：New操作符做了什么1 创建一个空的简单的js对象2 设置原型，将对象的__proto__设置为函数的prototype对象3 让函数中的this指向这个对象(function.call)，执行构造函数的代码(为这个新对象添加属性)4 判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，返回这个引用的对象（普通数据类型和复杂数据类型）原型每个对象都有他的原型对象，他可以使用原型对象身上的方法和属性拿到原型对象可以通过对象的--proto--或者构造函数的prototype拿到（构造函数中的this指向new创建的对象 this.name = name）闭包声明在一个函数中的函数就是闭包闭包函数，闭包是指内部函数可以访问其所在的外部函数中声明的参数和变量闭包特点保护私有变量，可以访问函数内部私有变量，局部变量常驻内存， 更加的安全还能够保持代码的封装性，访问也比较方便缺点：一直在内存中，浪费资源，内存占用过多就会溢出导致内存泄漏作用域是指代码的执行环境，作用域链就是嵌套函数一层一层往上查找Js的内置对象有哪些Math,Date,Array,String检查数据类型Typeof（判断函数是function，对象和数组和null都是object，nan是num，未定义就是未定义） 简单数据类型 boolean，number，string，undefinend，null引用类型 Object（包括对象数组date等）Object.prototype.toString.call(x) Object.prototype.toString方法可以判断数据类型，通过call函数改变this的指向，让this指向x，从而判断X的数据类型。之所以不通过x.toString去找原型对象的toString方法去判断，是因为在继承obj的时候重写了tostring方法Instanceof 判断对象属性 （一般不用，因为该方法设计初衷是为了判断构造函数的prototype属性是否出现在某个实例对象的原型链上）Constructor 访问构造函数来判断 不能判断undefined和nullJs中的Object. defineProperty给对象身上定义新的或者修改现有的一个属性，默认定义的属性无法删除和改变Object. defineProperty(obj,’name’,{Value: 属性的默认值get:function(){ name = ‘xxx’} function可以省略set: function(){ return ‘xxx’}Configurable：默认是false，为true是属性可以被删除Writable：默认是false，为true是属性可以被修改Enumerable:默认false，为true就可以枚举属性})Call apply bindCall和apply都会调用函数并且改变函数内部this指向。Call的参数是单个单个的，apply是数组形式的，bind返回一个函数，不会输出东西，其他两个会直接执行。Bind不会调用函数，但会改变this指向。Call:判断数据类型：Object.prototype.toString.call(x)类数组转数组：类数组是对象，但是内容和数组一样有序号有长度，Array.prototyte.slice.call(xxx)Apply：对给定数组求最大最小值，Math.max.apply(null,array) == Math.max(1,2,3,4,5)Map 遍历数组，会返回一个新的数组，三个参数arr.map(function(value,index,arr){xxx})For each 遍历数组，不会返回新数组 同上For in 遍历数组和对象，遍历的数组是字符串形式，遍历的对象属性包括原型对象身上的，输出的是属性名，如果需要输出属性值的话需要arr[i]For(let i in arr){ } For of 遍历对象，只能遍历迭代器对象，array，set，map，遍历的数组输出的是num格式Var 变量，函数提升Let 不存在变量函数提升，let定义的变量只在块中有用Const 严格的let，并且声明的时候必须赋值，且值的地址不能改（简单数据类型值不能改，复杂数据类型地址不能改，但是值可以改）如果直接定义一个变量而不用任何声明，默认该变量是window的，哪里都能用Var定义的变量是定义在了window上一个成员属性身上Let声明的变量不是真正的全局变量，而是保存在类似函数作用域的脚本作用域对象中，类似于局部变量，所以window上找不到数组常见方法Array = [1,2,3,4,5]1 array.indexOf(2) 检查数组中有没有2这个元素，有的返回下标，没有返回-13 Array.sort((a,b) =>{return a - b}) a-b是从小到大排序，b-a从大到小，返回一个数组也可以直接array.sort() 默认是从小到大的(10个数以内)5 array.push(1) 给array添加一个1，返回值是数组的长度，会直接改变原数组6 array.pop() 删除并返回数组的最后一个元素，改变原数组7 array.unshift（） 给数组开头添加元素，改变原数组8 array.shift（） 删除数组第一项，改变原数组9 array.reverse（） 反转数组11 array.splice(index，howmuch，arr...)从索引index开始删除howmuch个项，然后把arr添加进去以上都会改变原数组以下都不改变原数组2 Const res = array.filter((item,index) =>{ }) item是数组中的每个元素，会返回一个数组4 Const res = Array.reduce(function(prev,current,currentIndex,sourceArray){//Prev 上一个数字，current当前数字，currentIndex当前数字索引，Return Prev +current 求和})10 array.slice（start,end） 获取从start到end索引的数组，不包括end项12 array.join()把数组中的所有元素放入一个字符串，默认以逗号分割，或者填进去分割的东西,将数组转换成字符串13 array.concat(arr) 把arr中的元素都加到array后面，返回新数组14 Array.map(function(currentValue,index,arr){ }) map会依次处理数组中的每一个元素，并返回一个新的数组，对原来数组不影响，也不会检查空数组MathMath.min(1,2,3) math.max(1,2,3) math.ceil() 进1 math.floor() 舍 math.round()四舍五入Math.random 返回一个0-1的数字 不包括0和1Math.floor(math.random()*总数 + 第一个值)Math.floor(math.random()*10 + 1) 随机产生1-10Str.split(“X”) 把字符串以X为分隔符分割并返回一个数组，不填写X则一个一个分开 Array.from(arr) 可以直接把字符串转为数组数组去重1.filter和indexOf2.相邻元素排序--先利用sort排序，然后循环比较i+1和i项，不等的话就加入到新数组中3.set 解构赋值 return [...new Set(array)]4.const result = new Set(array) 此时已经排好序的，但是类型是set类型，所以需要array.from将类数组对象变成数组 array.from(new Set(array))数组中各项是对象的去重临时对象缓存数组项key值 --- 遍历比较1.新建一个map，使用filter过滤数组并set进map中进行has判断当前是否已经有了当前键，有的话就不加入。2.新建空对象，利用reduce方法，依次判断当前空对象是否有该键值对，没有则加入，有则忽略。3.可以加flag标签求数组中的最大最小值1 Math.max(...array) 因为max里要传一个一个的参数，所以...array Math.max.apply(null,array)2 利用reduce循环比较3 sort函数排序后直接选函数节流单位时间内只执行一次 -- 返回值是一个函数，开启定时器，定时器如果存在直接返回，清空定时器，并且把timmer置为null，能设置一个立即执行函数防抖事件被触发n秒后在执行回调，如果还没到时候就又被触发就重新计时，能设置一个立即执行ES6箭头函数和普通函数区别1 箭头函数的this指向父级作用域的this，普通函数的this是调用这个函数2 call,apply,bind无法改变箭头函数的this指向3 箭头函数不可以被当作构造函数4 箭头函数不可以使用arguments对象，如果使用的话需要在传参的时候表明接受的参数（...args） 普通函数：sayName(){const args = arguments log(args)} ----sayName(a,b)args里面就变成了传进去的参数的数组 也就是arguments是接受传入的参数的函数5 箭头函数不支持new.target(用来判断一个构造函数是否用new关键字调用)ES6新增了rest参数效果等同于arguments，不过arguments是一个类数组是一个对象，rest则是数组，且要求形参中必须有…rest，而且需要放到变量的最后类数组转数组方法Array.prototype.slice.call()（或者apply） Array.from new Array()Es6的扩展运算符……和…rest的不同在于 … 一般是在实参位置，…rest是在形参位置作用：数组合并：arr = […arr1,…arr2] 能把两个数组中的参数都拿出来，只写一个数组的话就是克隆，浅拷贝Symbol不能进行运算不能用for in遍历，但是可以用reflect.ownkeys获取键名str = Symbol（‘xx’） != str1 = Symbol（‘xx’）str = Symbol.for（‘xx’） == str1 = Symbol.for（‘xx’）Es6对象新增的方法Object.is(a,b) 比较两个变量是否相同 能判断普通和复杂数据类型也能够判断NaN ==NaNObject.assign(target,...sources) 两个或者多个对象进行合并，覆盖target，返回一个合并后的结果，后面的会覆盖前面的Object.key(obj) 返回目标对象所有可遍历的属性的键名 Object.value(obj) 返回目标对象所有可遍历的属性的键值Object.entries(obj) 返回目标对象所有可遍历的属性的键值对数组函数、方法、类函数是可以执行的js代码，通过名字直接调用的，函数中的数据是显示传递。方法是定义在对象的内部，不能直接调用，是特殊的函数，方法中的数据是隐式传递。类是ES6新增的定义，用来创建对象用的。在函数内部添加的属性会添加到使用该函数作为构造函数创建的对象身上。而在函数外部直接添加的属性，则只会作为构造函数的属性，而构造函数的实例对象拿不到这个属性，如果需要添加的话必须添加到构造函数原型身上。给函数添加方法和属性，如果直接添加的话，打印对象打印不出来，但是构造函数可以调用，实例函数不可以调用，所以必须通过原型。Person.prototype.name = ‘hello’ p1.name = ‘hello’ES5与ES6继承ES6使用语法 class B extends A继承，ES6类继承是ES5函数继承的语法糖，把ES6的继承通过Babel转义成ES5之后，发现它是通过object.create方法实现了（1）B.proto = A。表示子类B继承父类A的静态属性。通过Object.setPropertypeOf()方法实现（2）B.prototype.proto = A.prototype 。这与组合继承相同。 （一） ES6继承同时存在两条继承链。ES5是没有第一条原型链的。（二） ES6的子类必须在constructor方法中调用super()方法，super()代表调用父类的构造函数，因为子类没有自己的this对象，所以子类要先继承父类的this。但ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。（三） ES6 可以自定义原生数据结构（比如Array、String等）的子类，这是 ES5 无法做到的。ES6的构造函数通过原型链连接起来了，构造函数之间有直接的引用关系；ES5实际上是使用call或者apply借用父类构造函数实现的实例化，构造函数之间没有直接的引用关系ES5的实例化对象是由子类构造函数先创建的，然后父类构造函数是使用call或者apply修改这个对象ES6的实例化对象是由父类构造函数先创建的（这就是为什么要先调用super），然后子类构造函数修改这个对象Class和function的区别相同：都可以用构造函数，class的构造函数里面是一个constructor不同：class不可以使用call,bind,apply改变他的this指向Promise--异步编程解决方案，需要new三个状态：pending，fufilled，rejected 当一件任务交给promise时状态时pending，任务完成就是fufilled任务失败就是rejected。两个过程：分别是pending- fufilled和pending- rejected 状态一旦改变就不能在变了缺点：无法取消promise，一旦新建就会立即执行无法中途取消。 如果不设置回调，promise内部的错误不会抛出，不会反应到外部。then方法--拿到resolve或者reject的值，可以链式调用，接受两个参数，分别是成功 和失败回调Catch方法--捕获错误的Finally方法---执行到最后一定执行的Promise.all()---接受一组异步任务，全部完成后执行回调。将多个promise实例包装成一个新的promise实例 并发的Promise.race()---接受一组异步任务，第一个异步任务完成后后执行回调。将多个promise实例包装成一个新的promise实例 继发的Promise封装的话就是把内容封装到一个promise对象中，new Promse((resolve,reject)=>{})Async-await先执行async函数，返回一个promise对象Await相当于promise的thenTry…catch可以捕获异常，代替了promise的catchSet，map，weakset，weakmap区别？强引用与弱引用---在js中强引用是指变量通过指针指向一个地址。强引用不会被垃圾回收，弱引用虽然也是引用，但是当所有的强引用不在引用一个地址的时候，即使弱引用仍在引用，那么那个地址的数据仍然会被销毁。Set---成员不能重复，类似数组；可以遍历；方法有add，delete，hasWeakset---成员都是对象；成员都是弱引用，随时会消失（当其他对象都不引用该对象垃圾回收机制就会将其回收），不可以遍历Map---键值对的集合，可以遍历Weakmap--只接受对象为键名，不接受其他类型为键名；键名指向的对象不计入垃圾回收；不能遍历，方法同get，set，has，delete，不可以枚举不可以清空装箱：基本数据类型变成引用类型 拆箱：相反内存泄漏的几种情况？1 意外的全局变量 2 闭包 3 未被清空的定时器 4 未被销毁的事件监听 5 dom引用、Json和xmlXml大，占带宽，不容易解析处理，但是对数据描述性好，一般用于配置文件，json一般用于数据交互浅拷贝深拷贝浅拷贝只复制指针，仍然共享，深拷贝创造一模一样的新的对象。浅拷贝：Object.assign() for in 深拷贝：递归拷贝所有属性 使用json转换 lodash里的cloneDeepJs操作dom的方法通过document.getElmentsByid byname classname qureySelector querySelectoryAll 等可以修改标签内容 innerHTML 设置样式style.xxx 添加事件 onclick onmouseover onmouserover onfocus onblur 添加事件之后最后一个生效，添加多个事件用addEventListenerJs中display和visibility？ Visibility不破坏页面布局但会有空白

CSS 问题1111CSS3新特性？CSS中animation和transition的区别？常见的布局样式？二栏布局和三栏布局？选择器优先级以及权重？css可以继承的属性？块元素、行元素、行内快元素？px,em,rem,vw+vh区别？Overflow？左边定宽，右边自适应---二栏布局？左右固定，中间自适应---三栏布局？三栏平均分布？盒子绝对水平垂直居中？图片水平垂直居中？文字水平垂直居中？css画三角形和圆形？css提高页面性能的办法？水平方向的布局规律？解释line-hight与行距？盒子模型？浮动？定位？伪类伪元素？高度塌陷与边距重叠？IFC？BFC？移动端适配？Flex布局？css隐藏页面元素的几种方式和区别？script的src和img的src跨域的区别？:link、:hover、:active和:visited的区别？答案：CSS3新特性选择器(伪类，伪元素，nth-child()) 阴影(box-shadow) 背景与渐变 过渡 变化 动画媒体查询@media 颜色透明度rgba 圆角 border-radius 旋转倾斜位移 transformCSS中animation和transition的区别Animation是动画功能，通过控制关键帧来控制动画的每一步，实现动画效果Transition是过渡功能，可以让css变得平滑。因为原生的css过渡在客户端需要处理的资源比js和flash少得多，所以才更加平滑区别: Transition需要借助交互，Animation可以自动播放也可以借助交互。Transition只能定义开始和结束状态，Animation除开始结束状态，还可以通过关键帧控制中间形态。Transition不能暂停播放，Animation可以。变换 translate() 根据xy轴的移动 scale()缩放 rotate()3d变换渐变background:linear-gradient(方向，开始颜色，结束颜色)布局样式静态布局:传统网页采取的布局方式，一切元素都是以px做单位，适用于pc端流式布局:页面元素的宽度按照屏幕的分辨率进行适配调整，但整体布局不变(高宽大部分设置成百分比，可以设置宽高的最大最小值)Table布局:优点-表格中内容可以自动居中 缺点—table比其他标记占更多的内存(下载慢)，table会阻挡浏览器渲染引擎的渲染顺序(延迟页面生成速度)。Flex布局:弹性盒子布局，能够解决元素居中，并且自动弹性伸缩，适配不同的屏幕。包裹文字的各元素采用em/rem做单位，而页面的主要划分区域尺寸仍采用百分数或者px，适用于移动端Grid布局：将容器划分为行和列，产生单元格，然后指定项目所在的单元格。Float布局:脱离文档流不脱离文本流，文字环绕 缺点:高度塌陷自适应布局:多个静态布局的，每个静态布局对应一个屏幕分辨率范围，需要开发多套界面，屏幕太小内容会拥挤。响应式布局:创建多个流式布局，分别对应一个屏幕分辨率范围。能够在不同屏幕不同分辨率上实现不同的展现方式，只需要一套界面就够，屏幕会根据屏幕宽度调整设计。适用于pc端和移动端兼容,加meta标签，例如width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。使用rem，还能根据特定的media定制样式元素（标签）选择器 选择一个标签对样式进行改变Id选择器 给标签添加一个 id=‘XX’ 可以多个id命同样的名（但是一般不重复），选择的时候用#加id类选择器 class=‘XX’ 选择的时候用 .加class class名字可以重复，也可以一个标签用多个不同名称的class，写的时候用空格隔开。通配选择器选择所有的元素 直接用*选择器优先级!import内联样式 style=‘xx’ 1000Id选择器 0100类，伪类，属性选择器.conent 0010类型div选择器，伪元素选择器 0001通配符 子选择器 后代选择器 0000继承最低权值相等，后出现优先css的继承 可以继承的属性：字体 font-family：规定元素的字体的系列，楷书行数等Font-size: 字体大小 pxFont-weight:字体粗细 Font-style:字体的风格 斜体Font-variant:小写字母变大写，原本的大写字母变大一点文本Text-align:文本对齐方式 center left right justify 两端对齐 inherit 继承父类Text-indent:文本缩进Line-height:行高 line-height == height 文字上下居中显示Text-transform:大小写展示的方式间隔 Letter-spacing word-spacing 可见性 visibility 光标属性 cursor块元素：独占一行,高、宽、行高、margin，padding都可设置，宽度不设置默认父元素的 div p h ul table li form...行元素(内联元素)： 行内元素自身没有行高这个属性一行多个,高、宽、行高、margin和padding的top和bottom不可设置,（padding的top和bottom仅本身有效，但是不会撑开父盒子）但是left和right可以设置，元素的宽度高度就是包含的问题图片的宽度,不能变。行高其实可以设置，因为设置后只有位置发生了变化，但是并没有改变盒子的大小，所以在给行内元素设置背景的时候，还是默认的高度有背景。不会换行。（img虽然是行内元素，但是设置margin和padding都有效）Span a em b strong 内联块元素(行内块元素):一行多个，可以设置转换：(1)display:inline;转换为行内元素；(2)display:block;转换为块状元素；(3)display:inline-block;转换为行内块状元素。Px,em,rem,vw+vh的区别（一绝三相）Px 绝对单位，网页开发的基本长度单位Em 相对单位，相对于父元素字体大小进行计算（相乘）--没有当前盒子字体大小则是浏览器默认的Rem 相对单位，相对于根元素html字体大小进行计算（相乘）----没有当前盒子字体大小则是浏览器默认的Vm+vh 相对单位，相对当前网页视口宽度和高度进行计算Overflow是当元素溢出这个元素框的时候的选择，不一定是本身，也有可能是自己的子元素Css实现左边定宽，右边自适应的方法，二栏布局Calc函数---可以计算宽度，例如100%-100px左盒子浮动，右盒子加margin-left（左边盒子宽度）左边盒子浮动，右边盒子包括一个div，然后div设置overflow：hidden(触发BFC)（否则左边盒子会遮盖住右边的）子(左边盒子)绝父相，left，top设置为0(实测这个不设置也可以)。右边盒子加margin-left（左边盒子宽度）最大的盒子设置display：flex； 右边盒子flex：1；（占满flex剩余的空间） 最大盒子设置display；table; 左右盒子设置display：table-cell;Css实现三栏布局，左右固定，中间自适应1 左盒子左浮动，右盒子又浮动，最大盒子必须有尺寸，然后中间盒子设置margin-left和margin-right为左右盒子的宽度(此种方法注意盒子排列顺序是左右中)2 大盒子加display:table，左中右加display:table-cell3 大盒子相对定位，左右盒子绝对定位并且设置top left right，中间盒子设置绝对定位后设置left和right，分别是左右盒子的宽度(中间盒子也可以设置浮动)4 大盒子display:flex，中间盒子flex:1三栏布局平均分布大盒子display:flex，剩余盒子flex:1css实现绝对居中定宽高父盒子加相对定位，子盒子绝对定位，left、top 50%，margin-left、margin-top (子盒子宽高的一半，这里移动的是负值)px---------首先利用定位让子盒子左上角的点在父盒子中心，然后利用margin微调父盒子加相对定位，子盒子绝对定位，offset的偏移量(top,left,right,bottom)全设置为0，margin设置为auto，这样margin会自动变化，从而调整到中间不定宽高父盒子加相对定位，子盒子绝对定位，left、top 50%，transform:translate(50%,50%)---------首先利用定位让子盒子左上角的点在父盒子中心，然后使用transform属性父盒子display:table-cell,text-align:center, vertical-align:middle; 子盒子display:inline-block父盒子display:flex; justify-content:center; 子盒子align-self：center(或者父align-items:center)图片垂直居中要先让div包裹一个盒子，这个div在被最外部的div包裹----最外层div设置display=table,img的父元素div设置display=table-cell,vertical-align: middle;第二种办法是div直接包裹了图片。通过利用定位，再给图片元素设置top：50%，transform:translateY(-50%)图片水平居中上面基础上再给最外层div元素添加text-align:center上面基础上再给图片元素添加left和transform文字水平居中Text-align = center 文字垂直居中line-height = heightcss画三角形Border: 10px solid transparent; transparent--继承父元素颜色Border-top:10px solid red; top为下三角Css画圆形Border-radius:50%Width:80pxHeight:80pxBgc:xxxCss提高页面性能1属性设置用简写 margin的top、bottom等写成margin：10px 20px 30px.. 减少打包体积2用css替换图片 减少http请求节省带宽3删除不必要的零和单位 0.2=.2 减少打包体积4用精灵图代替单个文件加载 减少http请求节省带宽水平方向的布局规律Overflow：visible溢出部分显示，hidden隐藏（会裁剪），scroll生成垂直水平两个滚动条，Auto根据需要生成滚动条。 Overflow-x Overflow-y 单独处理水平或者垂直一个元素在其父元素中，必须满足margin+border+padding = 父元素内容区的高度假设父元素width=800，height=400子元素宽度等于200，会自动将margin-right变成600Width，margin-left，margin-right任意一个为auto，就会调整这一个的值如果width与margin都是auto，则width填满，margin是0margin-left，margin-right是auto，width固定，则子元素会居中 即margin：0 auto；盒子模型是css定义的一个模块，是一个长方形的盒子，实质上是包含了html元素的框。从里到外顺序：内容区 content 内边距 padding 边框border 外边距 margin 从里到内顺序内容区是由width和height控制 如果盒子中没内容则不显示。边框区的设置至少三个样式 border-width border-color border-style(线条的样式)分为标准盒模型和IE盒模型Box-sizing:context-box border-box(width和height包含padding和border)Margin值的顺序，逆时针，不够4个则对称浮动Float： left right某元素浮动后，字体不会浮动上去，会围绕浮动的元素清除浮动：可以在不想受浮动影响的元素增加clear属性，可选值是left、right、both。分别是不受左右浮动影响和不受最大的那个浮动的影响。原理：给该元素增加了外边距定位（position） relative相对（相对自身） absolute绝对（选择其最近的父级定位元素，当这个父级是static的时候，绝对定位元素会以body坐标原点进行定位） fixed 固定(相对浏览器窗口定位，不随滚动条改变) sticky粘滞（在元素到达某一位置时将元素固定）定位的默认值是static 相对定位不会脱离文档流,其他都会，可以使用z-index改变层叠1 开启定位后，可以通过偏移量（offset）来设置元素位置----top，bottom，left，right2 单一的绝对定位会定位到网页的左上角伪类:hover :active :visited :link :visited 等类似属性，能够在元素到达某种状态的时候得到某个样式或者失去某个样式的称为伪类。伪元素创建一些不存在于文档中的元素.box::after{content:’ ’ } (在box元素的末尾添加东西).box::before (在box元素的开头添加东西)IFC内部盒子水平排列 影响布局的有 font-size line-height height vertical-alignBFC概念1 内部盒子会垂直排列 2 属于同一个BFC的相邻盒子边距仍会重叠 3 不会与浮动区域重合 4 容器里面元素与外面元素互不影响5 计算BFC高度的时候浮动元素也计算在内开启BFC后不会边距重叠，不会塌陷，开启BFC的元素可以包含浮动元素1 float 2 absolute fixed 3 inline-block table-cell 4 overflow高度塌陷 垂直外边距重叠(水平的不会)高度塌陷是指子元素浮动（也就是脱离文档流）后，父元素的高度没有人撑开了，就会塌陷。解决方式一：开启BFC（指把这块元素开创一个独立的布局空间）垂直外边距重叠指块元素的外边距会发生重叠，边距取两者之间最大值。有三种情况：1同级别垂直两个元素设置的上边距或下边距，边距不会叠加而是最大值 2子元素设置margin时会传递给父元素的margin 边距虽然重叠了但是各自边距的值没变解决边距重叠：(开启BFC或使用fixed或absolutely)1 开启BFC的元素不会被浮动元素所覆盖2 开启BFC的元素子元素和父元素的外边距不会重合（当子元素设置margin值的时候，margin的值会传递给父元素，从而导致父元素也要移动，而子元素的相对位置没有变化，解决这个问题主要是要让子元素的不挨着父元素的边）3 开启BFC的元素可以包含浮动的子元素，开启后都可以清除浮动开启方式（也是清除浮动的几种方式）：1 父元素的overflow（滚动条）设置成一个非visible的值（一般设置成hidden或者auto）2 float:left; or position:absolute; or display:inline-block 都是通过脱离文档流开启解决方式二：在父元素中在增加一个div，然后给其增加clear属性，这样会不受浮动的影响在浮动元素的下面，也会撑大父元素到这个位置，缺点是多了一个div解决方式三：通过伪元素::after解决，给父元素增加一个::after属性，此时会在最后为父盒子增加内容，但是由于::after是行级元素，会在同一行，所以将其转变成块元素，最后在增加clear:both;(清除浮动)，达到效果。 清除浮动是清除浮动对当前元素的影响.box::after{content:’ ’； display:block; clear:both} 这个方式可以同时解决高度塌陷和外边距重叠的问题。通过在前后都增加空内容，添加间隔，display采用table表格的形式移动端适配使用media媒体查询，让不同屏幕的分辨率加载不同的css代码(代码量大)Flex弹性布局使用rem，因为rem是相对于根元素字体大小计算的等比缩放(字体也会越来越大或者越来越小，体验差)使用vw，vw是相对单位，1vw表示屏幕宽度的1%布局自适应的几种方案 要区分不同型号版本分辨率。响应式布局，弹性布局，流式布局(百分比布局)，使用rem 把px换算成vw需要等比缩放的元素用调试平台 浏览器 safari uni-appFlex布局水平的主轴和垂直的交叉轴Flex-direction:row row-reverse column column-reverse 排列顺序Flex-wrap:nowarp wrap wrap-reverse 如何换行Flex-flow: Flex-direction和Flex-wrap的简写Justiy-concent:flex-start flex-end center space-between(两端对齐，项目之间间隔相等) space-around（项目两个间隔相等，所以项目中间比两侧宽两倍） 主轴上对齐方式Align-items:stretch(默认值，是占满) flex-start flex-end center baseline(项目第一行文字基线对齐) 交叉轴对齐方式Alige-content: stretch flex-start flex-end center space-between space-around 多根轴线对齐方式项目的属性Order：项目排列顺序(数字越小排列越前) 默认是0Flex-grow: 默认是0，1的话代表占满剩余空间Flex-shrink: 默认是1，空间不足时等比例缩小。 0代表不缩小Flex-basis: 项目主轴的值(即项目的占据的空间，默认为项目的大小，设置后将占据固定空间) 默认是autoFlex: Flex-grow, Flex-shrink, Flex-basis 结合Align-self:单个项目的对齐方式 auto(继承父元素的) flex-start flex-end center baseline stretchcss隐藏页面元素的几种方式和区别？1 display：none 把元素彻底消失，会导致重拍重绘2 visibility：hidden 隐藏了元素，会发生重绘但不会重排3 opacity：0 透明度设置为零，会重绘4 height、width模型属性为0 要用这种方法实现隐藏需将元素的margin、border、padding、height和width等影响元素盒模型的属性设置成0，如果元素内有子元素的内容，还要设置其overflow：hidden 来隐藏子元素5 position：absolute 其中的top和left设置成很大的负值，移除页面script的src和img的src跨域的区别？原理上都是利用标签的src可绕过同源限制,跨域请求的特点, 硬要说不同,那么区别在于:img只能单向发送get请求,不可访问响应内容(只是展现),而script可对其进行解析:link、:hover、:active和:visited的区别？:link表示鼠标点击之前，也称为原始状态:hover表示鼠标悬停状态:active表示鼠标点击状态:visited表示鼠标点击之后状态

HTML 问题Label标签的作用？Html如何上传文件？HTML5新特性？MVC与MVVM的理解？commonjs规范、ES6 module、AMD、CMD？答案Label标签的作用Label标签一般和input配合使用，当用户点击label标签内容的时候会自动聚焦到和该标签关联的控件上。在input里加上id的属性，label里加for的属性进行连接。就能够点击字体勾选勾选框了Html上传文件将input中的type指定为file就可以上传文件了,上传多文件的话需要在给标签添加multiple。要读取file对象的话需要监听change事件。首先document.getElementByid(‘xx’)获取实例，然后给其添加监听addEventListener(‘change’,(event) => { const files = event.target.files}; log(‘files’,files))语义化标签Header 头部 main主体 nav代表超链接区域 article 可以表示文章、博客等内容 section章节页眉等区域 asdie通常表示侧边栏或者嵌入内容 footer 尾部语义化的优点代码结构清晰，便于维护。 方便其他设备解析。 有利于搜索引擎优化，爬虫会根据不同标签赋予不同权重增强型表单邮箱类型、数值范围、文件导入、图片按钮、颜色选择、日期选择、搜索框、手机号输入框、网址输入框 新增表单元素datalist下拉框(option是选项) progress进度条(设置value控制) meter刻度值新的表单属性 placeholder-默认显示 required-输入框不能为空 aotufocus-自动聚焦 autocomplete-提示写过的信息，默认on，且必须有name属性。Email默认off patten属性，校验正则匹配是否通过minlength和max视频和音频（共同的有src,controls,autoplay,loop）--好像都是共同的Video 方法play()pause()load()加载 属性width,height,controls像素或者宽高，播放条（写上就有播放条了） document.getElementsById(“”)Audio 方法类似 属性autoplay(true) controls() loop()循环播放 muted()静音播放 poster()音频封面Canvas画图和svg绘图Canvas是选定一个区域做画布，然后通过js动态的在这个区域中绘图Svg基于xml可以操作dom，渲染速度慢Svg不容易失帧，更加稳定，容易编程Svg每个形状被当作一个对象，canvas是一像素一像素的进行渲染，两者改变都会重绘地理位置 必须得到用户允许GetCurrentPositon()方法获取定位 可以实现位置距离的计算拖放APIDraggable 为true时开启拖放拖放事件原对象：dragstart 开始拖放 drag拖放中 dragend 拖放结束过程对象：dragenter 源对象开始进入过程对象范围内 dragover 在过程对象范围内移动Dragleave 源对象离开过程对象WebworkerJs是单线程任务，一次只能做一件事。单线程无法发挥cpu优势并且速度较慢阻塞浏览器执行，Webworker会为js创建多线程环境，js在主线程执行，new一个子线程在后台执行，完成计算后会返回给主线程，提高效率。缺点：兼容性不高Webworker的限制1 必须同源 2 dom限制，因为是在子线程，所以无法读取window，parent等主线程页面中的dom对象 3 主线程和子线程无法直接通信，不在一个环境 4 不能alert和conform但是可以使用XMLhttprequest对象发出ajax请求 5 子线程不能读取本地文件，加载的脚本必须来源于网络XMLhttprequest？用户在后台和服务器交换数据的对象XMLhttprequest功能？不重新加载页面就可以获取数据，在页面加载后从服务器请求数据WebstroageLocalstroage和sessionstroage方法 setItem(key,value) getItem(key) clear() removeItem(key)WebSocket是客户端和服务端数据交换的方式，允许服务端主动向客户端推送数据，并且只需要握手一次，就可以创建持久性的连接进行双向数据传输。是浏览器通过js给服务器发送建立WebSocket的请求，连接建立后就可以通过tcp连接直接交换数据。属性:WebSocket.readyState(连接状态) 0未连接1连接建立可以通信2连接正在关闭3关闭了WebSocket事件:Socket.onopen Socket.onmessage Socket.onerror Socket.onclose 分别是连接建立的时候触发，客户端收到服务端数据的时候触发，通信错误触发，关闭的时候触发方法:Socket.send()使用连接发送数据 Socket.close() 关闭连接Commonjs规范Commonjs规范加载模块是同步的，只有加载完成，才能执行后面的操作Module--每个文件就是一个模块，有自己的作用域。Module代表当前模块，是一个对象。Export--该属性是对外输出的接口，其他文件加载该模块就是读取module.exports变量Require--用于加载模块文件导入用require，导出用module.exports，导出的对象需要注意如果是静态的且非常量，后期可能会改动的，要使用函数动态获取。导入的参数可以随意修改module.exports = exports = {} 导出的对象Es6 module和Commonjs module区别导入导出不同，Commonjs使用exports和require es6使用import和export因为Commonjs的require是同步的，所以Commonjs模块规范只适合在服务端，es6无论浏览器还是服务端都可以Commonjs模块输出的是一个值的拷贝，会对加载结果进行缓存，内部再修改这个值则不会同步到外部。es6模块输出的是值的引用(拷贝不同于引用)Commonjs模块是加载时执行，es6是输出接口，使得能够对js模块进行静态分析Commonjs遇到循环依赖的时候，只输出已经执行的部分，后续的输出不会影响已经输出的变量。Es6使用import加载一个变量，变量不会被缓存，取值的时候直接取到最终值Commonjs顶层，this指向当前模块，es6模块this指向undefinedEs6支持加载Commonjs模块，Commonjs不能加载es6模块Es6 module和Commonjs module循环引用的问题循环加载就是a脚本运行依赖b，b脚本执行也依赖aCommonjs是加载时执行，出现循环加载的话只输出已经执行的部分，没有执行的不会输出。Es6对导出模块，变量，对象都是动态引用，遇到import的时候不去执行模块，只是生成一个指向被加载模块的引用。Commonjs一般用于后端nodejs，前端一般是es6的模块规范Commonjs为什么适用于服务端服务端加载模块直接是从硬盘读取，很快，浏览器的话还需要发请求浏览器如果用Commonjs模式的require加载模块，而这个模块需要http请求服务器去拿，并且因为Commonjs是同步的，所以就比较慢，会阻塞后面代码的运行AMD 异步模块定义指模块和模块的依赖可以异步加载，他们的加载不会影响后面语句的运行。AMD一般指requireJS，通过define将代码定义成模块，通过require实现代码模块加载。优缺点：执行早可以发现错误，异步。执行早浪费资源，开发成本高，麻烦难懂。CMD规范专门用于浏览器端的，模块加载是异步的，模块使用的时候才会执行。优缺点：依赖就近，延迟执行，容易在nodejs中运行。依赖spm打包，模块加载逻辑重。MVC与MVVM的理解MVC 是模型，视图，控制器的缩写，是最常见的软件架构之一。其中M是应用程序中用于管理数据的部分，通常就是从后端传过来的数据。V是管理页面的，控制应用数据显示的部分。C是管理和控制页面和数据的、处理用户交互的，将model的数据渲染到view视图中。MVC是单向通信的，m和c必须通过v来承上启下。MVVM：VM是MVVM模式的核心，连接了M与V，是双向数据绑定的，既能够将数据转换成我们看到的页面，也能将页面的数据转化为后端的数据，实现方式是通过dom的监听，通常是利用ViewModel实现了一个observer观察者，监听数据的变化并及时更新。区别：单向与双向 MVC中的Controller变成了viewModel MVVM通过数据来显示视图层而不是节点操作 MVVM主要解决了MVC中大量的DOM操作，提高了性能