初级前端面试题总结（持续更新....)

一 css部分

1. 什么是盒子模型？
   把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。
   盒子模型有两种形式：标准盒子模型，怪异盒子模型
   首先，两种模式可以利用box-sizing属性进行自行选择：
   标准模式：
   盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin
   box-sizing:content-box;
   怪异模式：
   盒子总宽度/高度 = width/height + margin
   box-sizing:border-box;
   两种模式的区别：
   　　 标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。
2. px、em 和 rem的区别
   px是固定的像素，一旦设置了就无法因为适应页面大小而改变
   em和rem相对于px更具有灵活性，他们是相对长度单位
   em相对于父元素，rem相对于根元素
3. 块级元素水平垂直居中的方法有哪些（三个方法）

.box{ 
   width:100px;  
   height:100px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-50px 0 0 -50px;
  }

.box{
    position: absolute;
    left: 0px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 200px;
    width: 300px;
}

.box {
	display: flex;
	align-items: center;
    justify-content: center;
}

4. 如何理解标签语义，它有哪些好处？
   1、语义元素清楚地向浏览器和开发者描述其意义。
   2、好处：
   （1）html结构清晰，代码可读性较好。
   （2）有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
   （3）无障碍阅读，样式丢失的时候能让页面呈现清晰的结构。
   （4）方便其他设备解析，如盲人阅读器根据语义渲染网页
   （5）便于团队维护和开发，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
5. css选择符类型

1、通用选择器：*
2、类别选择器：.class
3、id选择器：#id
4、标签选择器：p
5、后代选择器：div p
6、子选择器：div > p
7、群组选择器：div , p
8、相邻同胞选择器：div +p
9、伪类选择器：:link :visited :active :hover :focus :first-child
10、伪元素选择器：:first-letter :first-line:before :after :lang(language)
11、属性选择器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]

二 JS部分

1. 创建对象有几种方法？
1. 字面量对象 // 默认这个对象的原型链指向object

		```javascript
		var obj = {name: 'Jack'};
		```
	2. 通过new Object声明一个对象
		```javascript
		var obj1 = new Function ({name: 'Jack'});
		```
	3. 使用显式的构造函数创建对象

2. 请解释JSONP的工作原理，以及它为什么不是真正的AJAX。
JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。
AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！
3. 请解释一下JavaScript的同源策略
什么是同源策略？
同源策略 是由NetScape提出的一个著名的安全策略。所谓的同源，指的是协议，域名，端口相同。浏览器处于安 全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。
同源策略的目的？
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
4. JavaScript中如何检测一个变量是一个String类型？
javascript typeof(obj) === "string" typeof obj === "string" obj.constructor === String
5. 变量的作用域
要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域分类：全局变量和局部变量。
特点：
1、函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。
2、函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量
6. 如何理解闭包
1. 定义和用法：
当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。
2. 表现形式：
使函数外部能够调用函数内部定义的变量
7. 使用闭包的注意点
1）滥用闭包，会造成内存泄漏：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）会改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
8. sessionStorage 、localStorage 和 cookie 之间的区别
共同点：用于浏览器端存储的缓存数据
不同点：
(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；
web storage,会将数据保存到本地，不会造成宽带浪费；
(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;
(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；
sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；
(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
9. js数据类型有哪些
值类型/ 基本数据类型：undefined、string、number、boolean
引用类型：对象、数组、函数 （ Object, Array, Function)
10. null和undefined的区别？
1、null是一个表示”无”的对象，是只有一个值的特殊类型，转为数值时为0； undefined是一个表示”无”的原始值，表示一个空对象引用，转为数值时为NaN。
2、当声明的变量还未被初始化时，变量的默认值为undefined。
3、null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。 undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。
4、null 和 undefined 的值相等，但类型不等
11. undefined的典型用法？
1、变量被声明了，但没有赋值时，就等于undefined。
2、调用函数时，应该提供的参数没有提供，该参数等于undefined。
3、对象没有赋值的属性，该属性的值为undefined。
4、函数没有返回值时，默认返回undefined。
12. null的典型用法？
1、作为函数的参数，表示该函数的参数不是对象。
2、作为对象原型链的终点。
13 什么是 ajax，以及 创建ajax过程
Ajax是一种技术方案，但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

let xhr = new XMLHttpRequest();

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

 xhr.open("GET", "http://www.baidu.com, true);

(3)设置响应HTTP请求状态变化的函数.

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

(4)发送HTTP请求.

	xhr.send()

(5)获取异步调用返回的数据.

 xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {//修改dom
    console.log('成功')
    } 
}

(6)使用JavaScript和DOM实现局部刷新.

后续 继续更新…