1、简单介绍一下什么是盒模型？

网页上的每一个标签都是一个盒子,每个盒子都有四个属性：

内容（content）：盒子里面装的东西，网页中通常是指文字和图片（盒子中间装的东西）；

填充（padding）：内边距，比如买东西时怕盒子里面的东西损坏而添加的泡沫或者其它抗震的辅料（盒子里装的东西和边框的距离），填充只有宽度属性，每个HTML标记都可以看作一个盒子；

边框（border）：盒子本身（盒子的厚薄和颜色之分）；

边界（margin）：外边距（边框外边自动留白的空隙）；

这些属性我们可以把它看做我们日常生活中的盒子来理解，日常生活中所见的盒子也就是能装东西的一种箱子，CSS盒子模型都具备这些属性，所以叫它盒子模型。

2、position属性四个值：static、relative、absolute和fixed的区别和用法？

(1)、static（静态定位）：默认值；没有定位，元素出现在正常的流中（忽略top、bottom、left、right或者z-index声明）；

(2)、relative（相对定位）：生成相对的元素，定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，它是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，通过top、bottom、left、right的设置相对于其正常（原先本身）位置进行定位，可以通过z-index进行层次分级；

(3)、absolute（绝对定位）：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过top、bottom、left、right属性进行规定，可以通过z-index进行层次分级；

(4)、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过top、bottom、left、right属性进行规定，可以通过z-index进行层次分级；

3、HTML5新标签和CSS3的新特性有哪些？移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

(1)、HTML5新标签：

新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素。
内容元素，article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。

section元素：表示页面中的一个内容区块，比如章节、页眉、页脚/页面；

article元素：页面中一块与上下文不相关的独立内容，比如一篇文章；

aside元素：表示article元素内容之外的、与article元素内容相关的辅助信息；

header元素：页面中的标题或者一个内容区块；

footer：页面脚注；

nav元素：页面中导航连接部分；

video：定义视频

(2)、CSS3新特性：

css3实现圆角（border-radius）

阴影（box-shadow）

对文字加特效（text-shadow）

线性渐变（gradient）

旋转（transform）：   transform：rotate（90deg）、 scale（0.5,0.8）、 translate（0px，-60px）、 skew（-90deg，0deg）；旋转、缩放、定位、倾斜

增加了更多的css选择器：比如 背景rgba；

在css3中引入一些伪元素： p:first-of-type 选择属于其父元素的收个<p>元素的每个<p>元素；

还有媒体查询等等。

(3)、移除的元素：

显现层元素：basefont，big，center，font, s，strike，tt，u。
性能较差元素：frame，frameset，noframes。

(4)、a.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

        b.使用是html5shim框架

区分：DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。
4、简述你所知道的css单位，简单描述一些？

% 百分比、em 自动适应用户所使用的字体（1em=当前的字体尺寸，2em=当前字体尺寸的2倍，某元素以12pt显示时，2em=24pt）、rem  媒体查询、px  像素（计算机屏幕上某一点）。

5、前端优化的方法？（两部分）

(1)、面向内容的优化：图片优化、css/js优化、压缩css/js，减少http请求，减少DNS查找、避免重定向，使用ajax缓存，延迟载入组件，减少DOM元素数量等等；

(2)、面向server：缩小cookie，针对web组件使用域名无关性的。

6、$.get（）与$.post（）方法区别？

(1)、get请求是通过URL提交的，post是通过http消息实体提交的；

(2)、get提交有大小限制（2KB）,post方法不受限制；

(3)、get方法会被缓存下来，可能有安全性问题，post没有这类问题；

(4)、get方式请求数据的效率相比post方式较高；

(5)、get方式通过$.get（）获取，post（）方式通过$.post（）获取。

7、浏览器本地存储：

在较高版本的浏览器中，js提供了sessionStorage和globalStorage，在html5中提供的localStorage来取代globalStorage。

html5中的web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也会随之销毁，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储；

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；

web Storage和cookie的区别：

(1)、两者概念相似，区别在于web Storage是为了更大容量存储设计的，cookie大小受限制，当请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，而且cookie需要指定作用域，不可以跨域调用；

(2)、web Storage拥有setItem、getItem、removeItem、clear等方法，cookie需要前端开发者自己封装setCookie、getCookie；

(3)、cookie是不可获取的：cookie的作用是与服务器进行交互，作为http规范的一部分而存在，而web Storage仅仅是为了在本地“存储”数据而生；

(4)、localStorage和sessionStorage都具有相同的操作方法，例如;setItem、getItem和removeItem等。

cookie和session的区别：

(1)、cookie数据存放在客户的浏览器上，session存放在服务器上

(2)、coolie不是很安全，别人可以分析存放在本地的cookie进行cookie欺骗，考虑到安全性应该使用session

(3)、在减轻服务器性能方面，cookie优先于session，session会在一定时间内保存在服务器上，当访问量增多时会占用服务器性能

(4)、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie

(5)、将登陆账号、密码等重要信息存放在session，如果其他信息需要保留，可以放在cookie中

8、CSS中display：none和visibility：hidden的区别？

display：none 隐藏对应的元素，位置不存在，其本身也不存在。

visibility：hidden 隐藏对应的元素，在文档布局中仍保留原来的空间。

9、CSS中link和@import的区别？

(1)、link属于HTML标签，@import是CSS提供的；

(2)、页面被加载时link会被同时加载，@import引用的css会等到页面被加载完时再加载；

(3)、import只在IE5以上才能识别，link是HTML标签，无兼容问题；

(4)、link方式的样式的权重高于@import的权重。

10、CSS选择器有哪些？那些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？

(1)、CSS选择器：

id选择器：#myId

类选择器：.myclassname

标签选择器：div，p，h1

相邻选择器：div+p

子选择器：ul>li

后代选择器：li a

通配符选择器：*

属性选择器：input[type="text"]

伪类选择器：a：hover，li：nth-child

(2)、可继承的样式：font-size，font-family，color，text-indext

(3)、不可继承的样式：border，padding，margin，width，height

优先级就近原则，同权重情况下样式定义最为准，载入样式以最后的定位为准：

优先级：！important > id > class > tag 

                 important > 内联 > id

(4)、CSS3新增伪类：

p：first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素；

p：last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素；

p：only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素；

p：only-child 选择属于其父元素的唯一子元素的每个<p>元素；

p：nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素；

：enabled ：disabled  控制表单控件的禁用状态

：checked  单选框或复选框被选择

11、浮动元素引起的问题和清除浮动的方法有哪些？

引起的问题：

(1)、父元素的高度无法撑开，影响与父元素同级的元素；

(2)、与浮动元素同级的非浮动元素（内联元素）会跟随其后；

(3)、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方法：

(1)、使用css中的clear：both；属性，给父元素添加clearfix样式

.clearfix：after{content：“”；display：block；height：0；clear：both；visibility：hidden；}

.clearfix{display：inline-block；}/*for IE/Mac*/

(2)、给父级元素设置overflow：hidden；属性

(3)、给父元素添加高度。

12、JQuery中Ajax请求是怎么解决的？

(1)、ajax是一种综合技术，利用XMLHttpRequest来获取/发送数据，利用js来操作DOM，利用html+css显示渲染DOM，重新渲染局部界面，利用异步的方式和后台进行交换数据，可以无刷新的获取/发送数据。

(2)、缺点：

a、不同版本的浏览器对XMLHttpRequest对象支持度不足（如IE5之前）

b、前进、后退的功能被破坏

c、搜索引擎的支持度不够（搜索引擎爬虫还不能理解js引起变化数据的内容）

d、开发调试工具缺乏（相对于其他语言的工具来说，js或ajax调试开发很少）

(3)、异步和同步：

a、使用ajax最关键的地方，就是实现异步请求，接受响应及执行回调

b、ajax使用同步模式属于阻塞模式，会导致多条线路执行时又必须一条一条执行，会让web出现假死状态，所以，ajax大部分采用异步模式

13、JQuery中Ajax处理跨域的三种方式：

(1)、代理

(2)、XHR2

(3)、jsonp（只支持get请求）

14、JQuery中事件绑定有几种？

最常用的是bind、on（官方推荐用on，遵循项目规范）

15、阻止事件冒泡和阻止默认行为：

(1)、阻止事件冒泡：

IE：  cancelBubble       ====== 》  event.cancelBubble=true;

非IE： stopPropagation    

event.stopPropagation（）；在绑定事件中加入event参数，在函数中增加event

(2)、阻止默认行为：

IE： returnValue

非IE： preventDefault  

16、HTTP状态码：

100  Continue  继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200  OK   正常返回信息
201  Created  请求成功并且服务器创建了新的资源
202  Accepted  服务器已接受请求，但尚未处理
301  Moved Permanently  请求的网页已永久移动到新位置。
302 Found  临时性重定向。
303 See Other  临时性重定向，且总是使用 GET 请求新的 URI。
304  Not Modified  自从上次请求后，请求的网页未修改过。

400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized  请求未授权。
403 Forbidden  禁止访问。
404 Not Found  找不到如何与 URI 相匹配的资源。

500 Internal Server Error  最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200  OK   正常返回信息
201  Created  请求成功并且服务器创建了新的资源
202  Accepted  服务器已接受请求，但尚未处理
301  Moved Permanently  请求的网页已永久移动到新位置。
302 Found  临时性重定向。
303 See Other  临时性重定向，且总是使用 GET 请求新的 URI。
304  Not Modified  自从上次请求后，请求的网页未修改过。

400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized  请求未授权。
403 Forbidden  禁止访问。
404 Not Found  找不到如何与 URI 相匹配的资源。

500 Internal Server Error  最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

17、ES6中let和const的区别：

let命令声明变量，const命令声明一个只读的常量。

let的用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。

const一旦声明，常量的值就不能改变。

let声明的变量、值和类型都可以改变，没有限制，const声明的变量不可以改变值。

18、如何实现三栏布局（左右两边固定宽度，中间自适应）？

(1) 使用flex布局： 父元素设置 display: flex，左右两边设置固定宽度，中间设置 flex-grow: 1；(flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。)
(2) 使用浮动布局：左右两边设置固定宽度，而且分别设置 float:left和right，这个方法有一个需要注意的是在HTML中，中间栏需要和右边栏进行对调；
(3) 使用绝对定位布局：左右两边设置固定宽度和 position:absolute,而且分别设置 left: 0和 right: 0，中间栏只要设置左右margin为左右栏的宽度就可以了（需要注意的是左右两边需要设置 top: 0，不然右边会被订下来)。

效果图：

19、js基本数据类型有哪些？

Undefined 、Null 、 Boolean 、 Number和String

其中Undefined 、Null 、 Boolean 、 Number都属于基本类型。
Object、Array和Function则属于引用类型，String有些特殊。

20、javascript 代码中的"use strict";是什么意思 ?

use strict是一种ECMAscript 5 添加的（严格）运行模式，可以提高编译器效率，增加运行速度。

注：测试IE6,7,8,9均不支持严格模式。

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

第一种——调用localStorage
第二种——调用cookie+setInterval()

(1) 第一种：在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容； 
在另一个标签页里面监听 storage 事件。 
即可得到 localstorge 存储的值，实现不同标签页之间的通信。

(2) 第二种：将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

22、== 和 === 的区别？

===为恒等符：当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回true，若等号两边的值类型不同时直接返回false。

==为等值符： 当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较。
a、如果一个是null、一个是undefined，那么[相等]。
b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
c、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
d、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻 烦，我也不大懂）
e、任何其他组合，都[不相等]

23、30 == '30' 的过程是怎样的?​​​​​​​

30为数值类型，而'30'为字符串类型，因此等号两边的数据类型不相等，需要进行转换类型；
由于一个是数值，另一个字符串，所以需要将字符串转换成数值再进行比较，即 '30' => 30;
这时等号两边同样为数值型数据，即 30 == 30，所以返回 true。

24、以下代码输出的是什么？为什么呢？

for(var i=0; i<5; i++){
 setTimeout(function timer(){
 console.log(i); //输出5个5
 },0);
}

原因如图采用一个网友说的：

25、 $(document).ready()与 window.onload方法执行时间

$(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。

window.onload方法是子网页中的所有元素（包括元素的所有关联的文件）完全加载到浏览器后才执行，即javascript此可以访问网页中的任何元素。而通过jquery中的$(document).ready()方法注册的时间处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jquery而言都是可以访问的。

26、知道如何修改this的指向吗？

修改this指向的办法有三种： apply、 call和 bind
apply、 call：通过传入需要指向的对象，从而改变 this的指向，指向传入的第一个参数;
bind：它会创建一个函数的实例，其this值会被绑定到传给bind()函数的值。

window.color ='red';
var o ={ color:'blue'};
function sayColor(){
    console.log(this.color);
}
var globalSaycolor = sayColor;
var objectSaycolor = sayColor.bind(o);
globalSaycolor();// red
objectSaycolor();// blue

补充：

其实还有一种：new关键字改变this指向
因为在 new的过程中，其中有一个步骤为将构造函数内部的 this指向实例对象，所以通过 new关键字也可以改变 this的指向。