简述css盒模型

CSS盒模型分为两种

标准盒模型(W3C标准的盒子模型)

标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

标准盒模型下盒子的大小 = content + border + padding + margin

盒子宽高等于实际的宽高

怪异盒模型(IE标准的盒子模型)

怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width（content + border + padding） + margin

盒子的宽高等于 实际宽高+内边距+边框

总结

box-sizing: content-box 标准盒模型(默认)

box-sizing: border-box 怪异盒模型

box-sizing: inherit 继承父级的盒模型

px、em、rem、vh各自含义以及使用场景

1.px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。

2.em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

​ 如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸(默认16px)

3.rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

​ 如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

4.vw、vh

​ vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100

​ vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100

5.vm

​ 取相对视口最小的一个作为参考

​ 比如：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px

​

px 普通布局

em 用于处理字体

rem、vh、vw 用于flex弹性布局

简述块元素和行内元素的区别

块元素独占一行， 行内元素一行可以有很多个

块元素排序是从上到下，行内元素是从左到右

行内元素不能设置宽高

块元素 (h1-h6、p标签除外)可以包含块元素和行内元素，行内元素只能包含行内元素

h1-h6、p标签只能嵌套行内元素

JavaScript的数据类型

简单类型： string、number、boolean、undefined、null

引用类型：object、array、function

JavaScript的继承方式有哪些？各自有什么特点？

原型链继承

优点：

  1. 非常纯粹的继承关系，实例是子类的实例，也是父类的实例
  2. 父类新增原型方法/原型属性，子类都能访问到
  3. 简单，易于实现

缺点：

​ 1.要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中

​ 2.无法实现多继承

​ 3.来自原型对象的引用属性是所有实例共享的创建子类实例时，无法向父类构造函数传参

构造函数继承

忧点：

  1. 解决了子类实例共享父类引用属性的问题
  2. 创建子类实例时，可以向父类传递参数
  3. 可以实现多继承（call多个父类对象）

缺点：

  1. 实例并不是父类的实例，只是子类的实例
  2. 只能继承父类的实例属性和方法，不能继承原型属性/方法
  3. 无法实现函数复用，每个子类都有父类实例函数的副本

组合继承

优点：

  1. 可以继承实例属性/方法，也可以继承原型属性/方法
  2. 既是子类的实例，也是父类的实例
  3. 不存在引用属性共享问题
  4. 可传参
  5. 函数可复用

缺点：

  1. 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

总体来说还是组合继承的优点最多，但是实际使用的时候还是要根据实际情况选择继承方法。

JavaScript有什么模块化方案？

AMD/CMD (浏览器端)

CommonJS (服务器端)

服务端的javascript平台Node的模块化方案。一个文件一个模块。

module.exports (export) 对外提供接口

require 引入模块依赖

CommonJS 模块的特点：

  • 所有代码都运行在模块作用域，不会污染全局作用域。
  • 独立性是模块的重要特点就，模块内部最好不与程序的其他部分直接交互。
  • 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
  • 模块加载的顺序，按照其在代码中出现的顺序。

ES6模块化开发

export default (export) 导出

import 引入

http请求中，post和get请求区别是？

  • GET在浏览器回退时是无害的，而POST会再次提交请求。
  • GET产生的URL地址可以被Bookmark，而POST不可以。
  • GET请求会被浏览器主动cache，而POST不会，除非手动设置。
  • GET请求只能进行url编码，而POST支持多种编码方式。
  • GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
  • GET请求在URL中传送的参数是有长度限制的，而POST没有。
  • 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
  • GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
  • GET参数通过URL传递，POST放在Request body中。

（本标准答案参考自w3schools）

GET和POST还有一个重大区别，简单的说：

GET产生一个TCP数据包；POST产生两个TCP数据包。

长的说：

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

GET和POST两种基本请求方法的区别https://www.cnblogs.com/logsharing/p/8448446.html

为什么会有跨域问题？怎么解决跨域问题？

为什么有跨域问题？

因为同源策略（same-origin policy），简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为：

1.Cookie、LocalStorage和IndexDB无法读取；

2.DOM无法获得；

3.AJAX请求不能发送。

跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。

http://www.abc.com:80/

http(协议) www.abc.com(域名) :80(端口)

为什么要限制跨域

原因就是安全问题：如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。

为什么要跨域

既然有安全问题，那为什么又要跨域呢？ 有时公司内部有多个不同的子域，比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

解决跨域问题

1.跨域资源共享（CORS）

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

只需要在后台中加上响应头来允许域请求！在被请求的Response header中加入以下设置，就可以实现跨域访问了！

如下所示：

//指定允许其他域名访问
'Access-Control-Allow-Origin:*'//或指定域
//响应类型
'Access-Control-Allow-Methods:GET,POST'
//响应头设置
'Access-Control-Allow-Headers:x-requested-with,content-type'

2.通过jsonp跨域

JSONP是JSON with Padding（填充式json）的简写，是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON，例如：

callback({"name","trigkit4"});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

JSONP的原理：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。（即用JavaScript动态加载一个script文件，同时定义一个callback函数给script执行而已。）

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。 例如：有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://example.com/data.php， 那么a.html中的代码就可以这样：

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

JSONP的优缺点：

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

CORS和JSONP对比：

CORS与JSONP相比，无疑更为先进、方便和可靠。

（1）JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求；

（2）使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得说句，比起JSONP有更好的错误处理；

（3）JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS；

前端常见跨域解决方案（全）https://segmentfault.com/a/1190000011145364

简述下现在市面上有哪些框架和工具，主要应用场景是什么？