CSS篇

1.CSS 盒子模型，绝对定位和相对定位

css盒模型有两种，一种是标准盒模型 一种是怪异盒子模型1.box-sizing: content-box; // width = content + padding + border2.box-sizing: border-box;  // width = 定义时的宽度(包含padding + border)

2.绝对定位和相对定位

绝对定位： position: absolute; // 使元素脱离文档流，绝对定位的参照物是最近的已经定位的的元素相对定位： position: relative; 

3. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

(1) 给父级定义具体的height(2) 在标签尾部增加空的 div标签 (style="clear: both;")(3) 在父级元素增加 :after伪类 <div class="parent"></div>    .parent:after {        display: block;        clear: both;        content: '';        visibilty: hidden;        height: 0;    }    .parent {        zoom: 1; //兼容IE5一下的版本    }(4) 给父级标签定义overflow: hidden || auto;

4.如何保持浮层水平垂直居中

(1) 知道父级元素的高度    父元素定位 position: relative;    class {        position: absolute;        htight: 200px;        width: 100px;        left: 50%;        top: 50%;        margin: -100px 0 0 -50px;   }(2) flex布局    .class {      display: flex;      justify-content: center;      align-items: center;   }(3) 使用绝对定位以及transform   .class {       position: absolute;       height: 200px;       width: 100px;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);   }

5.行内元素（display: inline）块级元素（display: block） 融合行内于块级（display: inline-block）

    display: inline -->  宽度和高度由元素的内容决定，与其他元素共占一行，        例如<span> <i> <a> ,可以使用padding上下左右都有效，margin只有left、right有效        display: block  -->  默认宽度由父容器决定，高度由内容决定，独占一行且可以设置宽高，         例如 <div> <p> <ul>，padding、margin无论上校左右都有效        display: inline-block --> 可以是两个块级元素在同一行水平排列，padding、margin都有效，        inline-block存在间隙问题，解决方案：父元素设置font-szie: 0px;        void(空元素) <br> <link> <meta>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

6.css隐藏元素的方法，以及区别

1. visibility: hidden; 文档流中的位置依然存在，只是被隐藏掉2. display: none;      文档流中的位置不存在3. opacity: 0;         使元素的透明度变为透明，文档流中的位置依然存在4. position: absolute; margin-top: -9999px; margin-left: -9999px;          使用绝对定位使元素被推离出可视区，达到隐藏元素的目的

7.css中link和@import的区别

1. link使html的标签元素，而@import是css提供的2. 在页面加载时，link是同时加载的，而@import引用的css是当页面加载完成以后，才会加载3. 兼容问题：link无兼容问题，而@import不兼容IE5一下的版本

8.position的absolute和fixed之间的共同点与区别

1. 共同点：（1）都会把元素设置为display：inline-block            (2) 让元素脱离文档流，不占据空间            (3) 默认会覆盖非定位元素上2. 共同点： (1) absolute的“根元素”是可以设置的，是理他最近的已定位的元素；而fixed的“根元素”不可设置，    永远都是浏览器窗口，当浏览器滚动的时候，使用了fixed布局的不会随着浏览器滚动而改变位置

9.css3有哪些新特性

1. 圆角：border-radius  阴影：box-shadow2. 文字特效：text-shadow, 线性渐变：gradient 旋转：transform3. 旋转：transform: rotate(90deg)  scale(0.85, 0.90)  translate(0px,-30px)  skew(-9deg,0deg);     // 旋转； 缩放； 偏移； 倾斜4. 多背景：rgba5. 在CSS3中唯一引入的伪类是 ::selection.6. 媒体查询，多栏布局7. border-image 

10.css初始化样式---选择淘宝初始化样式

11.HTML与XHTML有什么区别

1. XHTML元素必须被正确的嵌套2. XHTML元素必须被关闭3. 标签名必须用小写字母4. XHTML必须含有根元素

12.多行文本的省略号问题

overflow: hidden;text-overflow: elipsis;display: -webkit-box;-webkir-line-camp: 3;-webkit-box-orient: vertical;

13.使用css画出一个三角形

<div class="text"></div>.text {    content: '';    border-width: 10px 0 10px 20px;    broder-style: solid;    border-color: transpaent transpaent transpaent #f5f5f5;}复制代码

1.JavaScript数据类型， null 和 undefined，原始数据类型，引用数据类型

数据类型： null number string boolean function objectnull 指的是用来表示尚未存在的对象  （1）作为函数的参数，表示函数的参数不是一个对象 （2）用来表示原型链的终点原始数据类型：null number string boolean symbol  引用数据类型：Object(array function date)1表示我定义的number类型  而number(1)则表示我定义的一个函数（方法）复制代码

2.讲一下 prototype 是什么东西，原型链的理解，什么时候用 prototype

prototype是函数对象上预设的对象属性（1）js中所有的东西都是对象，每个对象都有一个prototype属性，这个属性是一个对象（object）（2）JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype原型: 指的是一个对象上面的原型，这个原型通常是它的构造器的prototype属性    什么时候用 prototype使用prototype的好处是不会额外产生内存，所有实例化后的对象都会从原型上继承这个方法。也就是需要一个子类拥有父类的某些特性（同种特性可以覆盖），又可以添加自己的特性，而不会影响父类时候使用prototype。复制代码

3.函数里的this什么含义，什么情况下，怎么用。箭头函数呢

普通函数：随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this    指的是，调用函数的那个对象。箭头函数：this的作用域指的是定义的时候的对象复制代码

4.apply和 call 什么含义，什么区别?什么时候用

add.call(o,5,7);    //1+3+5+7=16//call 传参的时候是扁平的把每个参数传进去add.apply(o,[10,20]);   //1+3+10+20=34//apply 传参的时候是把参数作为一个数组传进去复制代码

5.怎样避免全局变量污染?ES5严格模式的作用，ES6箭头函数和ES5普通函数一样吗?

尽量使用let来定义变量，防治全局变量污染， // es6中的箭头函数的 this 指的是定义时的对象，是固定的， 而普通函数的this的指向时调用函数时的对象，是可以改变的复制代码

6.描叙一下事件流

事件流分为两种，一种是捕获事件流，一种是冒泡事件流捕获：是从根节点开始执行，一直往子节点查找执行，知道查找到执行节点冒泡：是从目标节点开始执行，一直往父节点冒泡查找，知道查到根节点，        用e.stopPropagation() 可以阻止事件冒泡复制代码

7.简单实现双向绑定mvvm

<input id="input" />//    const data = {}//    const input = document.getElementById('input')//    Object.defineProperty(data, 'text', {//      set(value) {//        input.value = value//        this.value = value//      }//    })//    input.onchange = function(e) {//      data.text = e.target.value//    }  复制代码

8.理解闭包吗?请讲一讲闭包在实际开发中的作用;闭包建议频繁使用吗?

闭包就是在函数中的局部变量，在函数返回的时候不会被释放掉，依然暴露在外面可以被其他函数调用当在一个函数内定义另外一个函数就会产生闭包复制代码

9. ajax 跨域有哪些方法，jsonp 的原理是什么，如果页面编码和被请求的资源编码不一致如何处理?

// ajax指的是： 异步的javascrupt adn XML,可以实现异步的数据交互，实现局部刷新；// json指的是： 轻量级的数据交互格式，本质是字符串； 优点：轻量级，易于人的编写和阅读，便于js解析，    支持复合数据类型  // ajax跨域的交互流程：     // （1）创建ajax对象 xhr = new XMLHttpRequest     //  (2) 规定请求地址 xhr.open(method, url, async)     //  (3) 等待服务器响应 xhr.onload()     //  (4) 发送请求     xhr.send()  // ajax 中的readyState    // readyState用来存放XMLHttpRequest的状态，监听从0-4发生不同的变化    // 0 -- 请求未初始化（此时还没有调用open）    // 1 -- 链接已建立，正在监听发送请求    // 2 -- 完成请求，并拿到返回数据    // 3 -- 请求处理中，解析服务器响应内容    // 4 -- 请求已完成，且响应就绪复制代码

10.javascript的同源策略

// 这是javascript的一种安全协议，为了方式某个脚本从不同的源装载// 同源指的是：同端口号、同协议、同域名，这样子才能相互发送ajax请求复制代码

11.如何解决跨域问题？

// 跨域指的是  不同的端口号、不同的域名、不同的协议// （1）使用 jsonp（json + padding）把数据内填充起来，来解决跨域的问题// （2）使用 cors（跨域资源共享），可以在后端上配置可跨域// （3）使用服务器代理来实现跨域复制代码

12.jsonp 实现跨域的原理

// ajax受同源策略的影响，不允许使用跨域请求，但是javascript中的 <script>标签中的     src属性是可以用来访问异域的js脚本的// 利用这个特性，服务端不再返回json格式的数据，而是返回了调用了某个函数的js代码，这样子就实现了跨域复制代码

13.reduce对象去重

let temp = {}data = data.reduce((prev, curv) => {    if(temp[curv.name]) {            } else {        temp[curv.name] = true        prev.push(curv)    }    return prev})复制代码

14.提取url中携带的参数

var url = '        98&type=all';function splitUrl () {    let url1 = url.split('?')[1] //获取url中问号后面的数据    let url2 = url1.spliy('&') // 以&来分割数组    let url3 = []    url2.forEach(item => {        url3.push(item.split('=')[1])    })    return url3}复制代码

15.防抖函数debounce(在固定时间内只执行一次，若在固定时间内再次触发，则重新计算时间)

/** * @desc 函数防抖 * @param func 函数 * @param wait 延迟执行毫秒数 * @param immediate true 表立即执行，false 表非立即执行*/function debounce(func, wait, immediate) {    let timeout;    return function () {        let context = this        let args = arguments        if (immediate) {            var callNow = !timeout            timeout = setTimeout(() => {                timeout = null            }, wait)            if (callNow) {                func.apply(context, wait)            }        } else {            timeout = setTimeout(() => {                func.apply(context. args)            }, wait)        }    }}复制代码

16.节流函数(在固定时间内无论触发多少次，只执行一次)

/** * @desc 函数节流 * @param func 函数 * @param wait 延迟执行毫秒数*/function throttle(func, wait) {    let timeout;    return function () {        let context = this        let args = arguments        if (!timeout) {            timeout = setTimeout(() => {                timeout = null                func.apply(context, args)            }, wait)        }    }}复制代码

17.js中DOM操作

1. 创建新节点  (1) createDocumentFragment() //创建一个DOM片段  (2) createElement() // 创建一个具体的元素  (3) createTextNode() // 创建一个文本节点2. 添加、移除、替换、插入  (1) appendChild() // 创建一个节点  (2) removeChild() // 移除一个节点  (3) replaceChild() // 替换一个节点  (4) insertBefore() // 在已有的节点前增加一个节点3. 查找  (1) document.getElementsByTagName() // 通过标签名称查找  (2) document.getElementsByName() // 通过元素的name属性的值  (3) document.getElementById() // 通过元素Id,唯一性复制代码

18.如何实现浏览器内多个标签页之间的通信?

(1)localStorage // 本地存储 (2)sessionStorage // 会话存储共同点：    (1) localStorage和sessionStorage的存储数据大小一般都是：5MB    (2) localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信不同点：    (1) localStorage不会随着浏览器关闭而消失，而sessionStorage会随着浏览器关闭而消失复制代码

19.document.write和inneaHTML的区别

document.write会重绘整个页面， 而innerHTML只会更新页面的一部分复制代码

20. var let const

var 定义的是一个全局作用域的变量let 定义的是局部作用域的变量，在相同作用域下不可重复定义同名变量const 定义的是一个常量    // 注意：当使用const定义一个对象的时候，对象内的值是可以修改的，因为该对象的内存            地址并未发生改变，所以改变对象内的值的时候就不会报错

1.双向绑定的原理

vue内部通过Object.defineProperty来拦截数据，把数据的读写更改为getter和setter，使数据实现双向绑定

2.vue中组件之间如何通信

(1) 父组件-->子组件：使用props(2) 子组件-->父组件：使用emit(3) 兄弟组件间传值：可以使用vue中的bus来实现，也可以通过vuex来实现

3.vuex的基本知识

vuex是专门用来对vue项目做状态管理的模式有默认的5个基本对象    （1）state 存储状态变量    （2）mutations 同步修改状态  this.$store.commit(methodName)     （3）actions   异步修改状态 this.$store.dispath    （4）getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使        用 $sotre.getters.fun()    （5）modules  store的子模块，常应用于大型项目，更好的管理state

作者：上学威龙
链接：