1.你对angular有哪些认识？

属于mvvm框架，现在非常的火，由谷歌开发出来并维护的框架，为了解决负责业务中ajax的开发痛苦，刚开始结果angular的时候，确实让我有一种耳目一些，原来代码还可以这样写的感觉，他的model层和view进行双向数据绑定，当一个改变的时候，框架帮我接听并且触发另一个的改变，这为我们的敏捷快速开发带来不少的便利，他的依赖注入，$scope自动带来的数据的继承。最重要的他还是单页面应用，和vue一样，有良好的路由。优点：1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；2. 是一个比较完善的前端MV*框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；3. 自定义Directive，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；

2.你对promise的实现，我只知道一些对promise的规定的东西，而且看过一些网上一些实现的demo，可能没有缺少时间花心思去深入研究一下吧，http://www.jianshu.com/p/473cd754311f

3.（1）1.Last-modified  与  If-Modified-Since

第一次请求的时候，服务器会返回Last-modified，然后状态码200

第二次请求的时候（客户端带If-Modified-Since），如果没有改变的话，服务器返回304(此时le.com下的配置是没有返回Last-modified的，但是注释1)，如果服务器发现改变了，返回200.

对于我们的node  web服务器来说，普通的express在没有配置的情况 下，这两个属性会默认的。

注释1:但是对于我们没有配置的node web express这种来说，还是会返回Last-modified的。

（2） ETag 和  If-None-Match

ETag：服务器返回的头信息，任何时候都会返回的。

If-None-Match：如果有缓存的情况下，客户端请求的时候回头信息中会发送。

这两个属性相当于服务器生成的一个文件的uuid之类的，每次对比一下，看是否改变了。

（3）max-age  与   Expires

max-age:http1.1的 单位是秒。表示从请求的时候起之后，这么时间内有效。网上的解释说：在这个时间内，不会在发出http请求，但是我观察还是发出请求了，应该缓存的判断方式不止这一种。

Expires ： http1.0 ，最后的失效时间，因为客户端的GMT和服务器的GPM可能不同，不太可靠，所以意义不大。现在基本被max-age覆盖了。他的意义只是为了兼容1.0

4.js日期的格式化Date.prototype.Format = function (fmt) { //author: meizz

var o = {"M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 };if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;}

5.

js深度复制的方式

1.使用jq的$.extend(true, target, obj)

2.newobj = Object.create(sourceObj)，// 但是这个是有个问题就是 newobj的更改不会影响到 sourceobj但是 sourceobj的更改会影响到newObj

3.newobj = JSON.parse(JSON.stringify(sourceObj))

//深拷贝，并且把合并后的值放到第二个参数里

function deepCopy(p, c) {var c = c || {};for (var i in p) {if (typeof p[i] === 'object') {c[i] = (p[i].constructor === Array) ? [] : {};deepCopy(p[i], c[i]);} else {c[i] = p[i];}}return c;
}

6.请写出一些前端性能优化的方式，越多越好

1.减少dom操作

2.部署前，图片压缩，代码压缩

3.优化js代码结构，减少冗余代码

4.减少http请求，合理设置 HTTP缓存

5.使用内容分发cdn加速

6.静态资源缓存

7.图片延迟加载

7.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

输入地址

1.浏览器查找域名的 IP 地址

2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…

3.浏览器向 web 服务器发送一个 HTTP 请求

4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）

5.浏览器跟踪重定向地址

6.服务器处理请求

7.服务器返回一个 HTTP 响应

8.浏览器显示 HTML

9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

10.浏览器发送异步请求

8.请大概描述下页面访问cookie的限制条件

1. 跨域问题

2. 设置了HttpOnly

9.vue生命周期钩子

1.beforcreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.actived

8.deatived

9.beforeDestroy

10.destroyed

10.js跨域请求的方式，能写几种是几种

1、通过jsonp跨域

2、通过修改document.domain来跨子域

3、使用window.name来进行跨域

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据（ie 67 不支持）

5、CORS 需要服务器设置header ：Access-Control-Allow-Origin。

6、nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求

11.对前端工程化的理解

• 开发规范

• 模块化开发

• 组件化开发

• 组件仓库

• 性能优化

• 项目部署

• 开发流程

• 开发工具

12.js设计模式

总体来说设计模式分为三大类：

• 创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

• 结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

• 行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模

13.iframe有那些缺点？

• iframe会阻塞主页面的Onload事件；

• 搜索引擎的检索程序无法解读这种页面，不利于SEO;

• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

• 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

14.扁平化多维数组

1、老方法

var result = []

function unfold(arr){

for(var i=0;i< arr.length;i++){

if(typeof arr[i]=="object" && arr[i].length>1) {

unfold(arr[i]);

} else {

result.push(arr[i]);

}

}

}

var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

unfold(arr)

2、使用tostring

var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

var b = c.toString().split(',')

3、使用es6的reduce函数

var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

var result = flatten(arr)

15. 排序算法

冒泡排序function BubbleSort(array) {

  var length = array.length;

  for (var i = length - 1; i > 0; i--) { //用于缩小范围

    for (var j = 0; j < i; j++) { //在范围内进行冒泡，在此范围内最大的一个将冒到最后面

      if (array[j] > array[j+1]) {

        var temp = array[j];

        array[j] = array[j+1];

        array[j+1] = temp;

      }

    }

    console.log(array);

    console.log("-----------------------------");

  }

  return array;

}

var arr = [10,9,8,7,7,6,5,11,3];

var result = BubbleSort(arr);

console.log(result);

选择排序

function SelectionSort(array) {

  var length = array.length;

  for (var i = 0; i < length; i++) { //缩小选择的范围

    var min = array[i]; //假定范围内第一个为最小值

    var index = i; //记录最小值的下标

    for (var j = i + 1; j < length; j++) { //在范围内选取最小值

      if (array[j] < min) {

        min = array[j];

        index = j;

      }

    }

    if (index != i) { //把范围内最小值交换到范围内第一个

      var temp = array[i];

      array[i] = array[index];

      array[index] = temp;

    }

    console.log(array);

    console.log("---------------------");

  }

  return array;

}

var arr = [ 1, 10, 100, 90, 65, 5, 4, 10, 2, 4 ];

var result = SelectionSort(arr);

console.log(result);

.插入排序

function InsertionSort(array) {

  var length = array.length;

  for (var i = 0; i < length - 1; i++) {

    //i代表已经排序好的序列最后一项下标

    var insert = array[i+1];

    var index = i + 1;//记录要被插入的下标

    for (var j = i; j >= 0; j--) {

      if (insert < array[j]) {

        //要插入的项比它小，往后移动

        array[j+1] = array[j];

        index = j;

      }

    }

    array[index] = insert;

    console.log(array);

    console.log("-----------------------");

  }

  return array;

}

var arr = [100,90,80,62,80,8,1,2,39];

var result = InsertionSort(arr);

console.log(result);

希尔排序(shell排序)每一种巧妙算法的本质是利用了一种巧合，shell算法的平均时间是nlog2n说明，他的本质和快速排序是一样的，只不过他的形式不同，不过 有一点相同的，他们都分为2分之一这种思想，不过shell更巧合一点。

function ShellSort(array) {

  var length = array.length;

  var gap = Math.round(length / 2);

  while (gap > 0) {

    for (var i = gap; i < length; i++) {

      var insert = array[i];

      var index = i;

      for (var j = i; j >= 0; j-=gap) {

        if (insert < array[j]) {

          array[j+gap] = array[j];

          index = j;

        }

      }

      array[index] = insert;

    }

    console.log(array);

    console.log("-----------------------");

    gap = Math.round(gap/2 - 0.1);

  }

  return array;

}

var arr = [ 13, 14, 94, 33, 82, 25, 59, 94, 65, 23, 45, 27, 73, 25, 39, 10 ];

var result = ShellSort(arr);

console.log(result);

快速排序

function quickSort(arr, left, right) {var len = arr.length,partitionIndex,left = typeof left != 'number' ? 0 : left,right = typeof right != 'number' ? len - 1 : right;if (left < right) {partitionIndex = partition(arr, left, right);quickSort(arr, left, partitionIndex-1);quickSort(arr, partitionIndex+1, right);}return arr;
}function partition(arr, left ,right) {     //分区操作var pivot = left,                      //设定基准值（pivot）index = pivot + 1;for (var i = index; i <= right; i++) {if (arr[i] < arr[pivot]) {swap(arr, i, index);index++;}        }swap(arr, pivot, index - 1);return index-1;
}function swap(arr, i, j) {var temp = arr[i];arr[i] = arr[j];arr[j] = temp;
}

16.css3动画

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。 deg 角度 rad 弧度
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

transform 向元素应用 2D 或 3D 转换函数。 
transform-origin 允许你改变被转换元素的位置。 Firefox 支持 -moz-transform-origin 属性，但仅限于 2D 转换。 Opera 支持 -o-transform-origin 属性，但仅限于 2D 转换。 Safari 和 Chrome 支持 -webkit-transform-origin 属性，同时适用于 2D 和 3D 转换。 
transform-style 规定被嵌套元素如何在 3D 空间中显示。 flat子元素将不保留其 3D 位置。 preserve-3d 子元素将保留其 3D 位置 只有webkit可用
perspective 规定 3D 元素的透视效果。 只有webkit可用 
perspective-origin 规定 3D 元素的底部位置。 只有webkit可用
backface-visibility 定义元素在不面对屏幕时是否可见。 visible 背面可见 hidden 背面不可见

-------------

matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

17.js的数组：

pop push shift unshift

every some sort forEach map filter reduce reduceRight

函数对象的属性，from,of,

copyWith,find,findIndex,fill

keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

includes可以判断说出NaN

18.for of

19.三个顶级：

Object.prototype.__proto__  == null

Function.prototype  结果是function(){}

Function.__proto__  结果是function(){}

如果：function box(){}

box == box.prototype.constructor == box.prototype.constructor.prototype.constructor

20.对象

Object.

apply,arguments,bind,call,caller,constructor,

create方法：这个的方法的出现为了简化创建对象的时候必须用函数的构造器

assign方法 assign可以放心啊一次向类添加多个方法

defineProperty有点类似于在Object上的静态方法，通过Object直接调用，它接受3个参数，obj,propNane,defineProperty

defineProperty可以选取的值，value configurable writable enumerable

Object.freeze方法用来冻结一个对象，被冻结的对象将无法添加，修改，删除属性值，也无法修改属性的特性值，即这个对象无法被修改

Object.getOwnPropertyDescriptor
ES5中还提供了一个读取特性值的方法，该方法接收对象及其属性名作为两个参数，返回一个对象，根据属性类型的不同，返回对象会包含不同的值。

getOwnPropertyNames用来获取对象自身的所有属性，包括可枚举的和不可枚举的所有属性，Object.keys只能返回可枚举的

Object.prototype.

不需要说的，toString valueOf，toLocaleString

hasOwnproperty 判断是不是当前对象的实例，并且不再原型链中

isPrototypeOf 方法接受一个对象，用来判断当前对象是否咋传入的参数对象的原型链上，

propertyIsEnumerable 用来判断给定的属性是否可以被for...in语句给枚举出来（es6中我们多用for of少用for in）

Object.__proto__.

Object.getPrototypeOf 返回的是函数对象的原型。

Object本身就是方法，所有Object.prototype ==  Function.prototype.__proto__;

21.for in与for of的区别

记住，for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

22.原生：访问链接http://www.cnblogs.com/coding4/p/5446594.html

23.js正则 http://www.cnblogs.com/coding4/p/6081063.html

24.面试模拟：

熟纪的面试题。

不能有一个不清楚，更不能有一个解释不清楚。

1.你为什么选择离职。

2.你感觉我们公司可以满足你的这些要求么。

3.你的职业规划是什么。

4.你为什么这么在上一家公司呆的时间这么短。

5.你感觉工作中什么最重要。

6.请先介绍一下自己。

7.你感觉多烧工资你可以接受么。

css

1.你对各种图片格式的理解。特别是webp。

2.你做过移动端的开发么。

3.你对响应式了解多少。

4.你对两列布局可以写出几种来么。

5.清楚浮动的方式。

6.盒子模型了解多少。

7.box_size属性的值有哪些。

8.bootstrap了解多少。

9.css3了解多少，2d的动画可以写一些么。

10.html5了解多少。

11.定宽和不定宽的垂直和水平剧中的方式。

12.flex的布局。

13.3列分布你会怎么写。

14.tab写一个吧。

15.伪类了解多少。

16.小三角写一个吧。

17.sass和less了解多少。

18.说出几种布局分式的区别。

19.html语义化。

20.重要：font-face 理解多少。fontawe

21.offsetWidth与scrollLeft

22.background-image和img的区别

23.列举几种常见的兼容性问题。

24.zoomin

25.html5的canvas了解多少。

26.说出几种浏览器，及其内核。

27.说下行内元素和块级元素的区别？行内块元素的兼容性使用？

28.Doctype作用？标准模式与兼容模式各有什么区别?

29.HTML5 为什么只需要写 <!DOCTYPE HTML>？

30.页面导入样式时，使用link和@import有什么区别？

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

32.

js的考点

1.数组和对象的方法。

数组去重，对象和数组深拷贝。

2.写出几种继承方式。

3.两种网络攻击。

4.几种排序。

5.angular，vue几种你了解多少。先比较两种mvc的优点和缺点。

6.react，backbone  knockjs.

7.http

8.缓存的了解。

9.webpack的了解。

10.你对，原生的闭包，作用。

11.原生的dom操作。

12.你对性能优化。

13.你对url开始发生的事情。

14.跨域的方式。

15.git的操作。

16.事件绑定。

17.原生的ajax。

18.写一个通用的事件侦听器函数

19.设计模式。

20.写一个最常用的js科里化。

21.日期的格式化。

22.commonjs cmd amd的区别。

23.缓加载和懒加载。按需加载。

24.mvc mvvm mvp的了解。

25.js的数据类型。

26.es6的了解。

27.promise的了解。

28.图片压缩。

29.正则。

30.js的一个拖拽。html5的拖拽。

31.node的了解。

32.重写一个alert和confirm.

33.html支持IE和Js支持IE不支持的时候。

33.Iframe的优点和缺点。

34.get和Post的区别和联系。

35.Math的几种方法。

36.重绘和重排。

37.es 6的构造函数，set与get。

38.数组和字符串的相互转化。

25. 这个地址的面试题直接打印出来。

http://www.qdfuns.com/notes/32387/4ce08765aacba7ad969315c59d267903.html

26. http://web.jobbole.com/88041/?repeat=w3tc

27.

面试题：

css

1.你对各种图片格式的理解。特别是webp。

ps:png,jpg现在用的比较普遍，gif由于采用了8位压缩,最多只能处理256种颜色（2的8次方）,故不宜应用于真彩图像。,PNG格式有8位、24位、32位三种形式，这种类型的图片就是为了取代GIF图片而生的, 除了GIF不支持动画的优势, 能用PNG的地方就用PNG, 原因是压缩比高,色彩好；JPEG是一种针对相片影像而广泛使用的一种失真压缩标准方法。它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形,因为它的压缩方法用在这些图形的型态上,会得到不适当的结果；WEBP图片格式：2010年谷歌推迟的图片格式,专门用来在web中使用, 压缩率只有jpg的2/3或者更低； 第一个版本的webp图片格式是有损的, 新版本中webp图片是无损的。

相对于png图片,webp比png小了45%,但是缺点是你压缩的时候需要的时间更久了；

2.你做过移动端的开发么。

简单的做过，移动端的banner的开发，但是系统的开发没有做过，一直想找一个这样的平台和机会，可以从事移动端的开发。

3.你对响应式了解多少。

bootstrap中12栏布局，通过@media screen and 这种方式，也可以通过onsize属性监听。

4.你对两列布局可以写出几种来么。

(1).left{

float: left;

width:100px;

}

.right{

background: red;

margin-left:100px;

}

(2)

.left{

background-color: red;

float: left;

width: 10%;

position: relative;

}

.right{

background-color: blue;

width: 90%;

float: left;

}

(3)巧妙的利用overflow

.left{

background-color: red;

float: left;

width: 100px;

}

.right{

background-color: green;

overflow: hidden;

}

（4）table
.content{
display: table;
width: 100%;
table-layout: fixed;

}
.left,.right{
display: table-cell;
}
.left{
background-color: red;
width: 100px;
}
.right{
background-color: green;
}

<div class="content">
<div class="left">left</div>
<div class="right">
<p class="e">qqq</p>
<p>2w</p>
</div>
</div>

（5）flex css3

.content{

display: flex;

}

.left{

background-color: red;

width: 100px;

margin-right: 20px;

}

.right{

background-color: green;

flex:1;

}

（6）display +position
.content{
position: relative;

}

.left{
background-color: red;
width: 100px;
display: inline-block;
}
.right{
background-color: green;
position: absolute;
left: 110px;
width: 100%;
top:0;
}
<div class="content">
<div class="left">left</div>
<div class="right">
<p class="e">qqq</p>
<p>2w</p>
</div>
</div>

5.清楚浮动的方式。

ie(添加zoom:1)

（1）结尾处加空的div然后cler:both;

(2)在div:bebore或者div:after  clear:both;

(3)给父类div添加height;

(4)父级div定义 overflow:hidden

(5)父级div定义 overflow:auto

(6)父级div 也一起浮动

(7) 父级div定义 display:table

(8)结尾处加 br标签 clear:both

请查看博客 (http://www.jb51.net/css/173023.html)

6.盒子模型了解多少。

盒子模型分为W3C盒子模型、IE盒子模型

分为margin.border,padding,content

不同之处在于IE的content包含了border和padding。

设置box-size可以解决这个问题哈。

7.box-size属性的值有哪些。

box-sizing: content-box|border-box|inherit;

border-box就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

8.bootstrap了解多少。

9.css3了解多少，2d的动画可以写一些么。

————————

transition:

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */

transition: width 2s, height 2s, transform 2s;

}

div:hover {

width: 200px;

height: 200px;

-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */

transform: rotate(180deg);

}

————————

animation:

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s;

-webkit-animation:myfirst 5s; /* Safari and Chrome */

}

@keyframes myfirst

{

0%   {background:red; left:0px; top:0px;}

25%  {background:yellow; left:200px; top:0px;}

50%  {background:blue; left:200px; top:200px;}

75%  {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

10.html5了解多少。

11.定宽和不定宽的垂直和水平剧中的方式。

(1)设置父table 子元素为table-cell 可以通过那

vertical-align: middle;
 text-align: center;

这个 方式ie6和7不支持。

(2)使用一个空标签span设置他的vertical-align基准线为中间，并且让他为inline-block，宽度为0

缺点：多了一个没用的空标签，display:inline-blockIE 6 7是不支持的(添加上：_zoom1;*display:inline)。

当然也可以使用伪元素来代替span标签，不过IE支持也不好，但这是后话了（3）思路：父元素相对定位，子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)

优点：高大上,可以在webkit内核的浏览器中使用

缺点：不支持IE9以下不支持transform属性

.parent3{

position: relative;

height:300px;

width: 300px;

background: #FD0C70;

}

.parent3 .child{

position: absolute;

top: 50%;

left: 50%;

color: #fff;

transform: translate(-50%, -50%);

}

方法四：

思路：使用css3 flex布局

优点：简单 快捷

缺点：兼容不好吧，详情见：http://caniuse.com/#search=flex

.parent4{

display: flex;

justify-content: center;

align-items: center;

width: 300px;

height:300px;

background: #FD0C70;

}

.parent4 .child{

color:#fff;

}

12.flex的布局。

display: inline-flex;

display: inline-flex;

display: -webkit-flex; /* Safari */

display: flex;

主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap：项目都排在一条线

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

6个属性设置在项目上

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

———————————————————

13.3列分布你会怎么写。

http://www.cnblogs.com/coding4/p/6533189.html

（1）绝对定位法

(2)margin负值法

(3)自身浮动法

注意main放在最后。

14.tab写一个吧。

<h2 id="tab">

<span  class="tab">1</span>

<span>2</span>

</h2>

<div id="ct">

<div class="ct">11111111111111111111</div>

<div>222222222222222222</div>

function    changetab(){

vartabs=document.getElementByIdx_x("tab").getElementsByTagName_r("span");

for (i=0;i<tabs.length;i++){

tabs[i].οnclick=tab;

   }

}

function    tab(){

var   tabs=document.getElementByIdx_x("tab").getElementsByTagName_r("span");

var   cts=document.getElementByIdx_x("ct").getElementsByTagName_r("div");

for (i=0;i<tabs.length;i++){

tabs[i].className="";

cts[i].className="";

if (tabs[i]==this){

tabs[i].className="tab";

cts[i].className="ct";

}

}

}

window.οnlοad=function (){

changetab();

}

15.伪类了解多少。

:active

:focus

:link

:visited

:lang

:hover

:nth-child

:nth-of-type

:after

:before

16.小三角写一个吧。

border-left:4px solid transparent;

border-right:4px solid transparent;

border-top:4px solid black;

17.sass和less了解多少。

18.说出几种布局分式的区别。

（1）流式布局。（2）浮动布局。（3）position

19.html语义化。

20.重要：font-face 理解多少。fontawe

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

21.offsetWidth与scrollLeft

22.background-image和img的区别

(1)background-image可以设置background-position。

(2)background-image 里边还可以放东西。

（3）background-image图像可以重复。img不可以。

23.列举几种常见的兼容性问题。

24.zoomin

25.html5的canvas了解多少。

canvas路径

fill() 填充当前绘图（路径）stroke() 绘制已定义的路径beginPath() 起始一条路径，或重置当前路径moveTo() 把路径移动到画布中的指定点，不创建线条closePath() 创建从当前点回到起始点的路径lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条clip() 从原始画布剪切任意形状和尺寸的区域quadraticCurveTo() 创建二次贝塞尔曲线bezierCurveTo() 创建三次方贝塞尔曲线arc() 创建弧/曲线（用于创建圆形或部分圆）arcTo() 创建两切线之间的弧/曲线isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

rect(x,y,w,h) stroke() 绘制路径 fill() 填充图形

moveTo(x,y) 开始绘制一条直线，指定线条的起点 lineTo(x1,y1) 指定直线要到达的位置 stroke() 绘制路径

26.说出几种浏览器，及其内核。

* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；

27.说下行内元素和块级元素的区别？行内块元素的兼容性使用？

28.Doctype作用？标准模式与兼容模式各有什么区别?

29.HTML5 为什么只需要写 <!DOCTYPE HTML>？

30.页面导入样式时，使用link和@import有什么区别？

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

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）不好用

5.子选择器（ul < li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a: hover, li: nth - child）

*   可继承： font-size font-family color, UL LI DL DD DT;

*   不可继承 ：border padding margin width height ;

*   优先级就近原则，样式定义最近者为准;

*   载入样式以最后载入的定位为准;

优先级为:

!important >  id > class > tag

important 比 内联优先级高