垂直居中DIV 1.绝对定位（盒子宽高已知）.father { position: relative; width: 500px; height: 500px; background-color: red; } .son { position: absolute; left: 50%; top: 50%; margin-left: -150px;（-盒子一半宽度） margin-top: -150px;（-盒子一半高度） width: 300px; height:300px; background-color: blue; } 2.绝对定位（宽高已知）.father { position: relative; width: 500px; height: 500px; background-color: red; } .son{ position:absolute; margin:auto; top:0; left:0; bottom:0;right:0; width: 300px; height:300px; background-color: blue; } 3.定位 （宽高未知） .son { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: blue; } 4.flex布局（父元素设置） .father { display: flex; align-items: center; justify-content: center; width: 500px; height: 500px; background-color: red; } 两栏布局左边固定右边自适应 1.float布局 .left { width: 200px; height: 200px; float: left; background-color: blue; } .right { margin-left: 200px; height: 200px; background-color: red; } 2.绝对定位 .father { position: relative; height: 200px; } .left { position:absolute; width: 200px; height: 100%; float: left; background-color: blue; } .right { position:absolute; height: 100%; left:200px; right: 0; background-color: red; } 3.flex布局 .father { height: 300px; width: 100%; display: flex; } .left { width: 300px; height: 100%; background-color: blue; } .right { flex: 1; height: 100%; background-color: red; } 三栏布局左右固定中自适应 1.float布局 .father{ height: 50px; div{ height: 100%; } } .left { width: 200px; float: left; background-color: red } .main { margin-left: 200px; margin-right: 200px; background-color: blue } .right { float: right; width: 200px; background-color: yellow } 2.绝对定位 .father{ position: relative; height: 50px; div{ position: absolute; height: 100%; } } .left { left: 0; width: 200px; background-color: red } .main { left: 200px; right: 200px; background-color: blue } .right { right: 0; width: 200px; background-color: yellow } 3.flex布局 .father { display: flex; height: 50px; div{ height: 100%; } } .left { width: 200px; background-color: red } .main { flex: 1; background-color: blue } .right { width: 200px; background-color: yellow } 介绍一下盒模型1.盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成2.盒模型分为IE盒模型和W3C标准盒模型。3.W3C标准盒模型又叫content-box，元素宽度/高度由border+padding+content组成。4.IE盒模型又叫border-box，元素宽度/高度由content组成。原型，原型链、构造函数原型：JS中的对象都包含了一个prototype的内部属性，这个属性所对应的就是该对象的原型。构造函数：原型对象包含一个constructor属性，对应创建所有指向该原型的实例的构造函数。原型链：原型链是是有一些用来继承和共享属性的对象组成的对象链。并且原型链的长度是有限的，原型链其实就是继承链，首先在这个对象的自身查找，如果没有该属性，就在其原型链上一层一层向上查找，如果查到原型链的顶端也没有该属性，那么就返回undefined。当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。常用的es6的功能？1.let、constlet定义变量，可以被重新赋值；const定义常量，不能被重新赋值2.解构赋值按照一定的模式从数组或者对象中取值，对变量进行赋值的过程3.模板字符串 ‘’4.块级作用域5.箭头函数this指向？1.普通函数胡它还会this指向window2.构造函数this指向实例对象3.调用方法this指向改方法所属的对象4.定时器this指向window改变this指向的方法？1.call（）2.apply（）3.bind（）数组去重？IndexOf()双重for循环es6的 […new Set()]filter()sort()1.Set去重var arr = [1,1,8,8,12,12,15,15,16,16];function unique (arr) {return Array.from(new Set(arr))}console.log(unique(arr)) //1,8,12,15,16闭包的理解理解：主要是为了设计私有的方法和变量。优点：可以避免全局变量造成污染。缺点：闭包会常驻内存，增加内存使用量，使用不当会造成内存泄漏。特征：（1）函数嵌套函数。（2）在函数内部可以引用外部的参数和变量。（3）参数和变量不会以垃圾回收机制回收。Promise异步编程的一种解决方案，用来解决回调地狱三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败） （Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。）resolved函数作用：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved）。reject函数的作用：将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected）。Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。then: Promise 实例添加状态改变时的回调函数。可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。说一下宏任务和微任务？JS是单线程，代码自上而下执行；宏任务：当前调用栈中执行的代码成为宏任务（定时器）微任务：当前宏任务执行完，在下一个宏任务开始之前需要执行的任务，可以理解为事件的回调（promise.then/proness.nextTick）宏任务与微任务执行顺序：script代码为第一层宏任务，如果有setTimeout，setInterval，则他们的回调函数会成为第二层的宏任务，promise.then()和process.nextTick()是微任务，在执行完该一层的宏任务后执行，且process.nextTick()优先于promise.then();数组一些常用的方法(es5+es6)1.添加（push与unshift）2.删除(pop与shift)3.从数组中连续删除、插入数据：splice()4.数组串联：join()5.数组排序：sort()6.数组颠倒：reverse()7.数组抽取：slice()8.数组合并：concat()9.数组转为字符串：toString()(ES5中数组常用方法)1.forEach()2.map(映射)3.filtter(过滤)4.every(所有)和some(存在)5.reduce()和reduceRight()6.indexOf()和lastIndexOf()对象一些常用的方法1、Object.keys( ) 对象不具有length属性，因此，你也可以通过Object.keys( )用来获取对象的长度2、Object.freeze( ) 防止对象中的数据突变3、Object.seal( ) 它可以防止向对象添加新属性，但是可以更改和更新现有属性4、Object.values( )允许你将对象内的所有值作为数组获取5、Object.entries( ) 它允许你同时获取对象的键和值，并返回一个多维数组，该多维数组包含每个键和值的其他数组。6、Object.create( ) 用于从另一个现有对象的原型创建一个新对象。页面渲染html的过程？1.用户输入url地址，浏览器根据域名寻找IP地址2.浏览器向服务器发送http请求，3.服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的4.浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染TCP三次握手和四次挥手三次握手：第一次：客户端请求建立链接第二次：服务器端针对客户端的SYN的确认应答并建立链接第三次：客户端针对服务器端的SYN的确认应答完成三次握手，随后客户端与服务器端之间可以开始传输数据了四次挥手：第一次：客户端请求断开链接第二次：服务器端针对客户端的FIN的确认应答第三次：服务器端请求断开链接第四次：客户端针对服务器端的FIN的确认应答服务器收到客户端的确认后，就关闭链接，此刻客户端等待一段时间后没有收到回复，就已经证明服务器端已经关闭，这时候客户端也可以关闭链接了HTTP与HTTPSHTTP：客户端与服务器之间数据传输的格式规范，表示“超文本传输协议”。HTTPS：在HTTP与TCP之间添加的安全协议层。默认端口号：HTTP：80，HTTPS：443。传输方式：http是明文传输，https则是具有安全性的ssl加密传输协议。连接方式：http的是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。TCP与UDP的区别TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接。TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信TCP首部开销20字节;UDP的首部开销小，只有8个字节。TCP提供可靠的服务。UDP适用于一次只传少量数据、对可靠要求不高的环境。GET和POST的区别后退/刷新：GET无害，POST数据会被重新提交。书签：GET产生的URL地址可以被收藏为书签，而POST不可以。数据：GET一般是用来获取数据，POST提交数据。数据类型：GET只允许ASCII字符,POST无限制。数据大小：GET大小有限制（一般来说1024字节）,POST理论上来说没有大小限制。安全性：GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。可见性：GET参数通过URL传递对所有人可见，POST数据不可见。历史保留：GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。如何解决跨域什么是跨域？浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域常见的：1、JSONP跨域jsonp的原理就是利用 2、跨域资源共享（CORS）3、nginx代理4、WebSocket协议跨域对MVC和MVVM的理解M:model(数据模型)，V：view(视图)，C：controller(逻辑处理)，VM：(连接model和view)MVC:单向通信。必须通过controller来承上启下。MVVM：数据双向绑定，数据改变视图，视图改变数据。深拷贝，浅拷贝浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象防抖与节流防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间应用场景：提交按钮、用户注册时候的手机号验证、邮箱验证、节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率应用场景：window对象的resize、scroll事件拖拽时候的mousemove射击游戏中的mousedown、keydown事件文字输入、自动完成的keyup事件性能优化性能优化减少http请求次数减少DNS查找避免重定向使用Ajax缓存少用全局变量、减少DOM操作的使用优化图片大小，通过CSS Sprites（精灵图）优化图片，将css放在顶部，将js放在底部webpack是怎么打包的，babel又是什么Webpack：把所有依赖打包成一个 bundle.js文件，通过代码分割成单元片段并按需加载。Webpack是以公共JS的形式来书写脚本的，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移。把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。babel 将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。git 和 svn的区别SVN是集中式版本控制系统，版本库是集中放在中央服务器的，首先要从中央服务器哪里得到最新的版本，干完活后，需要把自己做完的活推送到中央服务器。集中式版本控制系统是必须联网才能工作（如果在局域网还可以，带宽够大，速度够快，如果在互联网下，如果网速慢的话，就纳闷了）Git是分布式版本控制系统，没有中央服务器的，每个人的电脑就是一个完整的版本库，这样，工作的时候就不需要联网了，因为版本都是在自己的电脑上。自己在电脑上改了文件A，其他人也在电脑上改了文件A，这时，只需把各自的修改推送给对方，就可以互相看到对方的修改了。webSocketwebSocket：可以让服务器主动向客户端发送消息，适合开发聊天室，多人游戏等协作应用。WebSocket协议是基于TCP的一种新的网络协议。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。Vue中双向数据绑定是如何实现的？(答：通过数据劫持结合发布—订阅模式，通过Object.defineProperty()为各个属性定义get、set方法，在数据发生改变时给订阅者发布消息，触发相应的事件回调。)vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法vue生命周期概念：从创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程，称为为Vue 实例的生命周期。beforeCreate：创建前。此时，组件实例刚刚创建，还未进行数据观测和事件配置，拿不到任何数据。created：创建完成。vue 实例已经完成了数据观测，属性和方法的计算(比如props、methods、data、computed和watch此时已经拿得到)，但尚未开始挂载。beforeMount：挂载前。挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM）。编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。mounted：挂载完成。也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。beforeUpdate：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，不会触发附加地重渲染过程。updated：更新后。在由于数据更改导致地虚拟DOM重新渲染和打补丁之后调用，beforeDestroy;销毁前。在实例销毁之前调用，实例仍然完全可用。（一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件）destroyed：销毁后。在实例销毁之后调用，调用后，vue实列指示的所有东西都会解绑，所有的事件监听器会被移除。其他：activated：在keep-alive组件激活时调用。deactivated：在keep-alive组件停用时调用。组件之间如何传值一、Vue父子 组件之间传值子组件通过props来接受数据和通过$emit来触发父组件的自定义事件；二、兄弟组件之间的传值建一个公共组件bus.js.。传递方通过事件触发bus. e m i t 。 接 收 方 通 过 在 m o u n t e d （ ） 生 命 周 期 里 触 发 b u s . emit。接收方通过在mounted（）{}生命周期里触发bus. emit。接收方通过在mounted（）生命周期里触发bus.on。三、可以通过Vuxe 来跨组件传参。路由之间如何传参路由之间如何传参this.$router.push({ name: 'Getlist', params: { id: id } }) 谈一谈VUEX原理：Vuex是专门为vue.js应用程序设计的状态管理工具。构成:state:vuex的基本数据，用来存储变量。mutations:提交更改数据，同步更新状态。actions:提交mutations，可异步操作。getters：是store的计算属性。modules:模块，每个模块里面有四个属性。watch和computed的区别computed一定有返回值，而watch不需要返回值computed是依赖的数据发生改变时重新调用, watch是监听的响应式数据发生改变时重新调用watch和methods的区别methods是每次调用都会执行函数watch不需要调用,并且只有监听数据发生改变时才会重新调用Route和router的区别route:是路由信息对象，包括“path,parms,hash,name“等路由信息参数。Router:是路由实例对象，包括了路由跳转方法，钩子函数等。v-show和v-if的区别vue中data为什么是函数而不是对象？在Vue中组件是可以被复用的，而当data是一个函数的时候，每一个实例的data都是独立的，不会相互影响了。}

血泪浇灌的盛世【太和改制】通往盛唐之路———选几段本纪里面的——行幸阴山，观云川。所过亲见高年，问民疾苦，贫穷孤老，赐以粟帛。路见坏冢露棺，驻辇葬之。不论到哪里，都要和看望看望当地的老人，谈一谈当地的情况，一方面了解展示爱民之心，一方面也了解当地的情况。十八年二月，幸八公山，路中雨甚，诏去盖；见军士病，亲隐恤之。与士卒同甘共苦。注意，看望士卒是微服私访，隐瞒身份去的。诞与高祖同岁，幼侍书学，仍蒙亲待……十九年，至钟离，诞遇疾不能侍从。高祖日省问，医药备加。时高祖锐意临江，乃命六军发钟离南辕，与诞泣诀。左右皆入，无不掩涕。时诞已惙然，强坐，视高祖，悲而泪不能下，【言梦太后来呼臣】。高祖呜咽，执手而出，遂行。是日，去钟离五十里许。昏时，告诞薨问，高祖哀不自胜。时崔慧景、裴叔业军在中淮，去所次不过百里。高祖乃轻驾西还，从者数千人。夜至诞薨所，抚尸哀恸，若丧至戚，达旦声泪不绝；从者亦迭举音。与冯诞间的兄弟情。二十年七月，高祖以久旱不雨，辍膳三旦，百僚诣阙，引在中书省。高祖在崇虚楼，遣舍人问曰：“朕知卿等至，不获相见，卿何为而来？”肃对曰：“伏承陛下辍膳已经三旦，群臣焦怖，不敢自宁。臣闻尧水汤旱，自然之数，须圣人以济世，不由圣以致灾。是以国储九年，以御九年之变。臣又闻至于八月不雨，然后君不举膳。昨四郊之外已蒙滂澍，唯京城之内微为少泽。蒸民未阙一餐，陛下辍膳三日，臣庶惶惶，无复情地。”高祖遣舍人答曰：“昔尧水汤旱，赖圣人以济民，朕虽居群黎之上，道谢前王，今日之旱，无以救恤，应待立秋，克躬自咎。但此月十日已来炎热焦酷，人物同悴，而连云数日，高风萧条。虽不食数朝，犹自无感，朕诚心未至之所致也。”肃曰：“臣闻圣人与凡同者五常，异者神明。昔姑射之神，不食五谷，臣常谓矫。今见陛下，始知其验。且陛下自辍膳以来，若天全无应，臣亦谓上天无知，陛下无感。一昨之前，外有滂泽，此有密云，臣即谓天有知，陛下有感矣。”高祖遣舍人答曰：“昨内外贵贱咸云四郊有雨，朕恐此辈皆勉劝之辞。三覆之慎，必欲使信而有征。比当遣人往行，若果雨也，便命大官欣然进膳。岂可以近郊之内而慷慨要天乎？若其无也，朕之无感，安用朕身以扰民庶！朕志确然，死而后已。”是夜澍雨大降。站在楼台上的孝文，孤独忧郁。想要救斯民于水火，却依旧无法阻止灾异肆虐。以为诚心所至，必能感动上天。哪知道再怎么祈祷，也求不得正果。十七年九月，幸洛阳，周巡故宫遗址。帝顾谓侍臣曰：晋德不修，早倾宗室。荒毁至此，用伤朕怀。遂咏《黍离》之诗，为之流涕。所谓《黍离》之诗里面，最出名的是这两句——知我者谓我心忧，不知我者谓我何求。知我罪我，其为春秋。最后，本纪是这样评价他的——经纬天地，岂虚谥乎？经天纬地曰文，你以为是吹的？}