js本身總結的小東西（打印出來方便學習）

時間 2019-12-11

原文原文鏈接

1.你對angular有哪些認識？javascript

屬於mvvm框架，如今很是的火，由谷歌開發出來並維護的框架，爲了解決負責業務中ajax的開發痛苦，剛開始結果angular的時候，確實讓我有一種耳目一些，原來代碼還能夠這樣寫的感受，他的model層和view進行雙向數據綁定，當一個改變的時候，框架幫我接聽而且觸發另外一個的改變，這爲咱們的敏捷快速開發帶來很多的便利，他的依賴注入，$scope自動帶來的數據的繼承。最重要的他仍是單頁面應用，和vue同樣，有良好的路由。優勢：1. 模板功能強大豐富，而且是聲明式的，自帶了豐富的Angular指令；2. 是一個比較完善的前端MV*框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等全部功能；3. 自定義Directive，比jQuery插件還靈活，可是須要深刻了解Directive的一些特性，簡單的封裝容易，複雜一點官方沒有提供詳細的介紹文檔，咱們能夠經過閱讀源代碼來找到某些咱們須要的東西，如：在directive使用 $parse；css

2.你對promise的實現，我只知道一些對promise的規定的東西，並且看過一些網上一些實現的demo，可能沒有缺乏時間花心思去深刻研究一下吧， http://www.jianshu.com/p/473cd754311f

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

第一次請求的時候，服務器會返回Last-modified，而後狀態碼200html

第二次請求的時候（客戶端帶If-Modified-Since），若是沒有改變的話，服務器返回304(此時le.com下的配置是沒有返回Last-modified的，可是註釋1)，若是服務器發現改變了，返回200.前端

對於咱們的node web服務器來講，普通的express在沒有配置的狀況下，這兩個屬性會默認的。vue

註釋1:可是對於咱們沒有配置的node web express這種來講，仍是會返回Last-modified的。html5

（2） ETag 和 If-None-Matchjava

ETag：服務器返回的頭信息，任什麼時候候都會返回的。node

If-None-Match：若是有緩存的狀況下，客戶端請求的時候回頭信息中會發送。react

這兩個屬性至關於服務器生成的一個文件的uuid之類的，每次對比一下，看是否改變了。webpack

（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;
}

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的限制條件

跨域問題
設置了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跨域請求的方式，能寫幾種是幾種

一、經過jsonp跨域

二、經過修改document.domain來跨子域

三、使用window.name來進行跨域

四、使用HTML5中新引進的window.postMessage方法來跨域傳送數據（ie 67 不支持）

五、CORS 須要服務器設置header ：Access-Control-Allow-Origin。

六、nginx反向代理這個方法通常不多有人說起，可是他能夠不用目標服務器配合，不過須要你搭建一箇中轉nginx服務器，用於轉發請求

11.對前端工程化的理解

開發規範
模塊化開發
組件化開發
組件倉庫
性能優化
項目部署
開發流程
開發工具

12.js設計模式

整體來講設計模式分爲三大類：

建立型模式，共五種：工廠方法模式、抽象工廠模式、單例模式、建造者模式、原型模式。
結構型模式，共七種：適配器模式、裝飾器模式、代理模式、外觀模式、橋接模式、組合模式、享元模式。
行爲型模式，共十一種：策略模式、模板方法模式、觀察者模式、迭代子模式、責任鏈模式、命令模式、備忘錄模式、狀態模式、訪問者模式、中介者模

13.iframe有那些缺點？

iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

14.扁平化多維數組

一、老方法

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)

二、使用tostring

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

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

三、使用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. 排序算法

冒泡排序
 functionBubbleSort(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);

選擇排序

functionSelectionSort(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); 
   
     .插入排序 
   
functionInsertionSort(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更巧合一點。 
    
functionShellSort(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;
}

（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: -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屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用

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].onclick=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.onload=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