面試題小計

**公司面試題總結 （5.12號第六家一面）

技術很硬的一家公司，只是本身水平還比較水，問的是一些比較基礎的東西，可是組織好語言把一件事情的原理講清楚自我感受仍是有難度，或許就是基礎的部分掌握不太好，今天把面試過程的問題總結了下，也算是個鞏固（記性很差，能回憶起來的都在下面）

1.js的值類型和引用類型

    （1）值類型：number，boolean、null、undefined。
    （2）引用類型：對象、數組、函數。

    JavaScript中函數參數的傳遞方式既不是傳值，也不是傳引用，而是叫傳內存的引用： call-by-sharing  

 1 function changeStuff(num, obj1, obj2)
 2 {
 3     num = num * 10;
 4     obj1.item = "changed";
 5     obj2 = {item: "changed"};
 6 }
 7 
 8 var num = 10;
 9 var obj1 = {item: "unchanged"};
10 var obj2 = {item: "unchanged"};
11 changeStuff(num, obj1, obj2);
12 console.log(num);   // 10
13 console.log(obj1.item);    // changed
14 console.log(obj2.item);    // unchanged

• changeStuff()中的num, obj1, obj2都是一個引用
• 他們的內容是某塊內存的地址
• 這個地址的值來自於外部定義的三塊內存，是那三塊內存地址的一份拷貝
• 同時，在函數內部這三個參數的值是能夠直接被修改的，能夠指向其餘對象（因爲JavaScript中沒有指針或引用運算符，只能直接修改）

所以，咱們從內存和引用的角度再來看看changeStuff()的定義：

1 function changeStuff(num, obj1, obj2)
2 {
3     num = num * 10; // 對num賦值，修改num的指向，新內存的內容爲old_num * 10
4     obj1.item = "changed";  // 修改原始obj1內存中的內容
5     obj2 = {item: "changed"};   // 對obj2賦值，修改obj2指向，新內存的內容爲{item: "changed"}
6 }

下面還有幾個例子，仔細區分和理解下

 1          function test1(){
 2               var a=[1];
 3               var b=a;
 4               alert(a);// 1
 5               b=[2];
 6               alert(a);//1
 7           }
 8           test1();
 9           function test2(){
10               var a=[1];
11               var b=a;
12               alert(a);// 1
13               b[0]=2;
14               alert(a);//2
15           }
16           test2();
17           function test3(a){
18               a={name:'bob'};
19           }
20           var a={name:'john'};
21           alert(a.name);//john
22           test3(a);
23           alert(a.name);//john
24 
25           function test4(a){
26               a.name='bob';
27           }
28           var a={name:'john'};
29           alert(a.name);//john
30           test4(a);
31  alert(a.name);//bob

2.json的數據格式以及如何處理

　　json就是javascript object notation ，他與xml同樣都是用來作數據的傳遞用的，json是一種文本格式，不是文檔格式，是獨立存在的而不是侷限於某一種語言，是理想的數據交換格式

json基於兩種結構來搭建：（1）.名字/鍵值對 （2） 有序值的列表

json 各類數據格式以下：（1）object  （2）array （3）value 值  （4）string （5）number

注意：任何的xml均可以經過json的數據格式來表示，json的編碼格式統一是Unicode格式，編碼默認是UTF-8

3.DOM對象模型

    DOM就是document object model 其中

           document表明文檔對象 ，

           object ：對象。js中的對象又分爲三種  用戶定義對象（由程序員自行建立的對象），內建對象（內建在javascript語言裏的對象，ECMA-262 只定義了兩個內置對                 象，即 Global 和 Math （它們也是本地對象，根據定義，每一個內置對象都是本地對象），本地對象就是 ECMA-262 定義的類（引用類型）。它們包括：

           Object   Function   Array   String    Boolean   Number    Date   RegExp    Error    EvalError   RangeError   ReferenceError  SyntaxError   TypeError  URIError

           宿主對象（由瀏覽器提供的對象，全部 BOM 和 DOM 對象都是宿主對象）。

4.選取DOM元素的方法
　　（1）經過ID選取元素：getElementById();該函數是document對象特有的函數，參數只有一個，必須放在單引號，或者雙引號裏面，返回值是有着該參數的元素節點對應的　　對象。

　　（2）經過標籤名獲取元素：getElementsByTagName()；也是隻有一個參數，參數是標籤的名字，可是它返回的是一個對象數組(Nodelist對象)，即便整個文檔裏這個標籤只　　有一個元素，也是返回一個數組，只是這時的數組長度爲1,。

　　（3）經過css類選取元素：getElementsByClassName();也是隻接受一個參數，及類名，要指定多了類名時，只要在字符串參數中，用空格分隔開來就行

　　如element.getElementsByClassName("class2 class1")將選取elements後代元素中同時應用了class1和class2樣式的元素（樣式名稱不區分前後順序），返回也是一個對　　象數組（Nodelist對象），對應着文檔裏的一組特定元素節點。

　　（4）經過名字選取元素：getElementsByName();也是一個參數，name 的名稱，返回一個對象數組（Nodelist對象）。Name屬性，只在少數的HTML元素中有效，好比：　　表　　單，表單元素，<iframe>，<img>元素。這是由於name屬性是爲了方便提交表單數據而打造。 而且，getElementsByName()方法，不在Document類中，只是針對　　HTML文檔可用，在XML中卻不能用。

　　（5）、經過CSS選擇器選取元素：document.querySelectorAll("selector") 其中，selector爲合法的CSS選擇器，好比：　　　　　　　　　　　　　　　　　　　　　　　　經過過#id，.class,p[tittle=」aaa」] , var test=document.querySelectorAll("#test");經過這樣得到對象那個後，再繼續操做。等等。返回值也是一個對象數組（Nodelist　　對象）。

      這些原生的元素選取的方法比jQuery要快不少。

　　擴展：獲取和設置屬性。（1）getAttribute()；只有一個參數，打算得到的屬性的名字；

                                    （2）setAttribute（）；容許對屬性節點值作出修改。使用方法：object.setAttribute(attribute,value);

5.js中的經常使用事件

 onabort     onblur        onchange     onclick     ondblclick onerror     onfocus     onkeydown onkeypress onkeyup     onload                         onmousedown onmousemove onmouseout onmouseover  onmouseup onreset     onresize     onselect     onsubmit     onunload

 6.js調用函數的方法

• 方法調用模式  　　 好比說給一個對象添加一個方法，而後進行調用

  1 var myobject={
  2             value:0,
  3             inc:function(){
  4                     alert(this.value)
  5                 }
  6         }
  7     myobject.inc()

• 函數調用模式  

  1   var add=function(a,b){
  2         alert(this)//this被綁頂到window
  3             return a+b;
  4         }
  5     var sum=add(3,4);
  6     alert(sum)      

• 構造器調用模式（不建議使用）

  1 var quo=function(string){
  2             this.status=string;
  3         }
  4     quo.prototype.get_status=function(){
  5             return this.status;
  6         }
  7     var qq=new quo("aaa");
  8     alert(qq.get_status());

• apply和call調用模式

7.js綁定事件的方法

• 在DOM元素中直接綁定

  <input onclick="alert('hello neo')" type="button" value="hello neo" 

• 在javascript代碼中綁定  .onclick=function()的格式

  1 document.getElementById("demo").onclick=function(){
  2     alert(this.getAttribute("type"));  //  this 指當前發生事件的HTML元素，這裏是<div>標籤
  3 }

• addEventListener() 或 attachEvent() 來綁定事件監聽函數
  

   其中前者的使用方法 elementObject.addEventListener(eventName,handle,useCapture)

eventName	事件名稱。注意，這裏的事件名稱沒有「 on 」，如鼠標單擊事件 click ，鼠標雙擊事件 doubleclick ，鼠標移入事件 mouseover，鼠標移出事件 mouseout 等。
handle	事件句柄函數，即用來處理事件的函數。
useCapture	Boolean類型，是否使用捕獲，通常用false 。這裏涉及到JavaScript事件流的概念，後續章節將會詳細講解。

           

 

 

後者的使用方法elementObject.attachEvent(eventName,handle); 這裏注意eventname有on

addEventListener()是標準的綁定事件監聽函數的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數；  可是，IE8.0及其如下版本不支持該方法，它使用attachEvent()來綁定事件監聽函數。因此，這種綁定事件的方法必需要處理瀏覽器兼容問題。

8.事件冒泡和事件捕獲

（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。

  IE 5.5: div -> body -> document

  IE 6.0: div -> body -> html -> document 

  Mozilla 1.0: div -> body -> html -> document -> window

（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，而後到最精確(也能夠在窗口級別捕獲事件，不過必須由開發人員特別指定)。

（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，可是，捕獲型事件先發生。兩種事件流會觸及DOM中的全部對象，從document對象開始，也在document對象結束。 

  DOM事件模型最獨特的性質是，文本節點也觸發事件(在IE中不會)。

支持W3C標準的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法，基中第3個參數 useCapture是一個Boolean值，用來設置事件是在事件捕獲時執行，仍是事件冒泡時執行。而不兼容W3C的瀏覽器(IE)用 attachEvent()方法，此方法沒有相關設置，不過IE的事件模型默認是在事件冒泡時執行的，也就是在useCapture等於false的時候 執行，因此把在處理事件時把useCapture設置爲false是比較安全，也實現兼容瀏覽器的效果。

傳統綁定事件方式
在一個支持W3C DOM的瀏覽器中，像這樣通常的綁定事件方式，是採用的事件冒泡方式。

ele.onclick = doSomething2

IE瀏覽器
如上面所說，IE只支持事件冒泡，不支持事件捕獲，它也不支持addEventListener函數，不會用第三個參數來表示是冒泡仍是捕獲，它提供了另外一個函數attachEvent。

ele.attachEvent("onclick", doSomething2);

事件的傳播是能夠阻止的：
• 在W3c中，使用stopPropagation（）方法
• 在IE下設置cancelBubble = true；
在捕獲的過程當中stopPropagation（）後，後面的冒泡過程也不會發生了~

stopPropagation() 能阻止父元素的click事件函數執行，但不能阻止當前元素同時綁定的其它事件函數執行 。
3.阻止事件的默認行爲，例如click <a>後的跳轉~
• 在W3c中，使用preventDefault（）方法；
• 在IE下設置window.event.returnValue = false;
不是全部的事件都能冒泡，例如：blur、focus、load、unload

9.事件委託的機制

所謂事件的委託，就是經過父元素給子元素綁定事件，其實現的原理一是基於事件發生機制中的冒泡過程，二是監聽事件源，w3c下是e.target ， IE下是window.event.srcElement   下面是原生的js實現一個事件委託的過程

 1  oUl.onmouseover = function(ev){
 2     var ev = ev || window.event;//獲取event對象
 3     var target = ev.target || ev.srcElement;//監聽事件源
 4     if(target.nodeName.toLowerCase() == "li"){//當事件源於要添加事件的對象一致時
 5                                                                    //執行事件
 6     target.style.background = "red";
 7     }
 8   }

經過事件委託來綁定事件有兩方面的好處 ： 1. 提高性能  2.動態綁定，新添加的元素也有事件，而不用從新執行綁定過程

10.控制檯的使用（挖坑，慢慢填）

11.瀏覽器對象模型 BOM

• BOM是Browser Object Model的縮寫，簡稱瀏覽器對象模型
• BOM提供了獨立於內容而與瀏覽器窗口進行交互的對象
• 因爲BOM主要用於管理窗口與窗口之間的通信，所以其核心對象是window
• BOM由一系列相關的對象構成，而且每一個對象都提供了不少方法與屬性
• BOM缺少標準，JavaScript語法的標準化組織是ECMA，DOM的標準化組織是 W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——網頁超文本應用程序技術工做組 目前正在努力促進BOM的標準化）
• BOM最初是Netscape瀏覽器標準的一部分

 

JavaScript中的任何一個全局函數或變量都是window的屬性

window子對象

• document 對象
• frames 對象
• history 對象
• location 對象
• navigator 對象
• screen 對象

window對象關係屬性

• parent：若是當前窗口爲frame，指向包含該frame的窗口的frame （frame）
• self ：指向當前的window對象，與window贊成。 （window對象）
• top ：若是當前窗口爲frame，指向包含該frame的top-level的window對象
• window ：指向當前的window對象，與self贊成。
• opener ：當窗口是用javascript打開時，指向打開它的那人窗口（開啓者）

window對象定位屬性

• IE提供了window.screenLeft和window.screenTop對象來判斷窗口的位置，但未提供任何判斷窗口大小的方法。用 document.body.offsetWidth和document.body. offsetHeight屬性能夠獲取視口的大小（顯示HTML頁的區域），但它們不是標準屬性。
• Mozilla提供window.screenX和window.screenY屬性判斷窗口的位置。它還提供了 window.innerWidth和window.innerHeight屬性來判斷視口的大小，window.outerWidth和 window.outerHeight屬性判斷瀏覽器窗口自身的大小。

window對象的方法

窗體控制

moveBy(x,y)——從當前位置水平移動窗體x個像素，垂直移動窗體y個像素，x爲負數，將向左移動窗體，y爲負數，將向上移動窗體

moveTo(x,y)——移動窗體左上角到相對於屏幕左上角的(x,y)點，當使用負數作爲參數時會吧窗體移出屏幕的可視區域

resizeBy(w,h)——相對窗體當前的大小，寬度調整w個像素，高度調整h個像素。若是參數爲負值，將縮小窗體，反之擴大窗體

resizeTo(w,h)——把窗體寬度調整爲w個像素，高度調整爲h個像素

窗體滾動軸控制

scrollTo(x,y)——在窗體中若是有滾動條，將橫向滾動條移動到相對於窗體寬度爲x個像素的位置，將縱向滾動條移動到相對於窗體高度爲y個像素的位置

scrollBy(x,y)—— 若是有滾動條，將橫向滾動條移動到相對於當前橫向滾動條的x個像素的位置(就是向左移動x像素)，將縱向滾動條移動到相對於當前縱向滾動條高度爲y個像素的位置(就是向下移動y像素)

窗體焦點控制

focus()—— 使窗體或控件獲取焦點

blur()——與focus函數相反，使窗體或控件失去焦點

新建窗體

open()——打開(彈出)一個新的窗體

close()——關閉窗體

opener屬性——新建窗體中對父窗體的引用，中文"開啓者"的意思

window.open方法語法

    window.open(url, name, features, replace);

 

open方法參數說明

• url -- 要載入窗體的URL
• name -- 新建窗體的名稱(目標,將在a 標籤的target屬性中用到，當與已有窗體名稱相同時將覆蓋窗體內容).open函數默認的打開窗體的方式爲target的_blank彈出方式，所以頁面都將以彈出的方式打開
• features -- 表明窗體特性的字符串，字符串中每一個特性使用逗號分隔
• replace -- 一個布爾值，說明新載入的頁面是否替換當前載入的頁面，此參數一般不用指定

open函數features參數說明,若是不使用第三個參數，將打開一個新的普通窗口

參數名稱	類型	說明
height	Number	設置窗體的高度，不能小於100
left	Number	說明建立窗體的左座標，不能爲負值
location	Boolean	窗體是否顯示地址欄，默認值爲no
resizable	Boolean	窗體是否容許經過拖動邊線調整大小，默認值爲no
scrollbars	Boolean	窗體中內部超出窗口可視範圍時是否容許拖動，默認值爲no
toolbar	Boolean	窗體是否顯示工具欄，默認值爲no
top	Number	說明建立窗體的上座標，不能爲負值
status	Boolean	窗體是否顯示狀態欄，默認值爲no
width	Number	建立窗體的寬度，不能小於100

　 特性字符串中的每一個特性使用逗號分隔，每一個特性之間不容許有空格

open方法返回值爲一個新窗體的window對象的引用

對話框

alert(str)—— 彈出消息對話框（對話框中有一個「肯定」按鈕）

confirm(str)—— 彈出消息對話框（對話框中包含一個「肯定」按鈕與「取消」按鈕）

prompt(str,defaultValue)——彈出消息對話框（對話框中包含一個「肯定」按鈕、「取消」按鈕與一個文本輸入框），因爲各個瀏覽器實現的不一樣，若沒有第二個參數（文本框中的默認值）時也最好提供一個空字符串

狀態欄

window.defaultStatus 屬性——改變瀏覽器狀態欄的默認顯示(當狀態欄沒有其它顯示時)，瀏覽器底部的區域稱爲狀態欄，用於向用戶顯示信息

window.status 屬性——臨時改變瀏覽器狀態欄的顯示

時間等待與間隔函數

setTimeout()—— 暫停指定的毫秒數後執行指定的代碼

clearTimeout()——取消指定的setTimeout函數將要執行的代碼

setInterval()——間隔指定的毫秒數不停地執行指定的代碼

clearInterval()——取消指定的setInterval函數將要執行的代碼

setTimeout與setInterval方法有兩個參數，第一個參數能夠爲字符串形式的代碼，也能夠是函數引用，第二個參數爲間隔毫秒數,它們的返回是一個可用於對應clear方法的數字ID

    var tid = setTimeout("alert('1')",1000); alert(tid); clearTimeout(tid);

 

History對象,在瀏覽器歷史記錄中導航

History 對象的屬性:length 返回瀏覽器歷史列表中的 URL 數量

History 對象的方法

• back() 加載 history 列表中的前一個 URL
• forward() 加載 history 列表中的下一個 URL
• go(num) 加載 history 列表中的某個具體頁面

Location 對象

Location 對象的屬性

• hash 設置或返回從井號 (#) 開始的 URL（錨）
• host 設置或返回主機名和當前 URL 的端口號
• hostname 設置或返回當前 URL 的主機名
• href 設置或返回完整的 URL
• pathname 設置或返回當前 URL 的路徑部分
• port 設置或返回當前 URL 的端口號
• protocol 設置或返回當前 URL 的協議
• search 設置或返回從問號 (?) 開始的 URL（查詢部分）

Location 對象的方法

• assign() 加載新的文檔,這與直接將一個URL賦值給Location對象的href屬性效果是同樣的
• reload() 從新加載當前文檔，若是該方法沒有規定參數，或者參數是 false，它就會用 HTTP 頭 If-Modified-Since 來檢測服務器上的文檔是否已改變。若是文檔已改變，reload() 會再次下載該文檔。若是文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是徹底同樣的。若是把該方法的參數設置爲 true，那麼不管文檔的最後修改日期是什麼，它都會繞過緩存，從服務器上從新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是徹底同樣。
• replace() 用新的文檔替換當前文檔，replace() 方法不會在 History 對象中生成一個新的紀錄。當使用該方法時，新的 URL 將覆蓋 History 對象中的當前紀錄。

Navigator對象

Navigator 對象的屬性

• appCodeName 返回瀏覽器的代碼名
• appName 返回瀏覽器的名稱
• appVersion 返回瀏覽器的平臺和版本信息
• browserLanguage 返回當前瀏覽器的語言
• cookieEnabled 返回指明瀏覽器中是否啓用 cookie 的布爾值
• cpuClass 返回瀏覽器系統的 CPU 等級
• onLine 返回指明系統是否處於脫機模式的布爾值
• platform 返回運行瀏覽器的操做系統平臺
• systemLanguage 返回 OS 使用的默認語言
• userAgent 返回由客戶機發送服務器的 user-agent 頭部的值
• userLanguage 返回 OS 的天然語言設置

框架與多窗口通訊

子窗口與父窗口

只有自身和使用window.open方法打開的窗口和才能被JavaScript訪問,window.open方法打開的窗口經過window.opener屬性來訪問父窗口。 而在opener窗口中，能夠經過window.open方法的返回值來訪問打開的窗口！

框架

window.frames集合：在框架集或包含iframe標籤的頁面中，frames集合包含了對有框架中窗口的引用

    alert(frames.length);//框架的數目 alert(frames[0].document.body.innerHTML);//使用下標直接獲取對框架中窗口的引用 //不但可使用下標，還可使用frame標籤的name屬性 alert(frames["frame1"].document.title);

 

在框架集中還可使用ID來獲取子窗口的引用

    var frame1 =document.getElementById("frame1");//這樣只是獲取了標籤 var frame1Win = frame1.contentWindow;//frame對象的contentWindow包含了窗口的引用 //還能夠直接獲取框架中document的引用 var frameDoc = frame1.contentDocument; alert(frameDoc);//但IE不支持contentDocument屬性

 

子窗口訪問父窗口——window對象的parent屬性

子窗口訪問頂層——window對象的top屬性

瀏覽器檢測

市場上的瀏覽器種類多的不可勝數，它們的解釋引擎各不相同，期待全部瀏覽器都一致的支持JavaScript,CSS,DOM,那要等到不知什麼時 候，然而開發者不能幹等着那天。歷史上已經有很多方法來解決瀏覽器兼容問題了，主要分爲兩種：1.userAgent字符串檢測，2.對象檢測；固然，也 不能考慮全部的瀏覽器，咱們須要按照客戶需求來，若是能夠確信瀏覽網站的用戶都使用或大部分使用IE瀏覽器，那麼你大可放心的使用IE專有的那些豐富的擴 展，固然，一旦用戶開始轉向另外一個瀏覽，那麼痛苦的日子便開始了。下面是市場上的主流瀏覽器列表：

• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Opera
• Safari

注意，瀏覽器老是不斷更新，咱們不但要爲多種瀏覽器做兼容處理，還要對同一瀏覽器多個版本做兼容處理。好比IE瀏覽器，其6.0版本和7.0版本都 很流行，由於微軟IE隨着操做系統綁定安裝（以前也是同步發行，微軟平均每兩年推出一款我的桌面，一樣IE也每兩年更新一次；直到如今，因爲火狐的流 行，IE工做組才加快IE的更新），因此更新的較慢，6.0版和7.0版有很大差異。

市場上還存在一些其它瀏覽器，但因爲它們都是使用的上面所列瀏覽器的核心，或與上面瀏覽器使用了相同的解釋引擎，因此無需多做考慮。下面是主流的瀏覽器解釋引擎列表：

1. Trident

   Trident （又稱爲MSHTML），是微軟的窗口操做系統（Windows）搭載的網頁瀏覽器—Internet Explorer的排版引擎的名稱，它的第一個版本隨着1997年10月Internet Explorer第四版釋出，以後不斷的加入新的技術並隨着新版本的Internet Explorer釋出。在將來最新的Internet Explorer第七版中，微軟將對Trident排版引擎作了的重大的變更，除了加入新的技術以外，並增長對網頁標準的支持。儘管這些變更已經在至關大 的程度上落後了其它的排版引擎。使用該引擎的主要瀏覽器：IE，TheWorld，MiniIE，Maxthon，騰訊TT瀏覽器。事實上，這些瀏覽器是 直接使用了IE核心，由於其userAgent字符串中返回的信息與IE是如出一轍的！

2. Gecko

   壁虎，英文爲"Gecko"。Gecko是由Mozilla基金會開發的佈局引擎的名字。它本來叫做NGLayout。Gecko的做用是讀取諸如 HTML、CSS、XUL和JavaScript等的網頁內容，並呈現到用戶屏幕或打印出來。Gecko已經被許多應用程序所使用，包括若干瀏覽器，例如 Firefox、Mozilla Suite、Camino,Seamonkey等等

3. Presto

   Presto是一個由Opera Software開發的瀏覽器排版引擎，供Opera 7.0及以上使用。Presto取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態功能，例如網頁或其部分可隨着DOM及Script語法的事件而從新排版。Presto在推出後不 斷有更新版本推出，使很多錯誤得以修正，以及閱讀Javascript效能得以最佳化，併成爲速度最快的引擎。

4. KHTML

   是HTML網頁排版引擎之一，由KDE所開發。KDE系統自KDE2版起，在檔案及網頁瀏覽器使用了KHTML引擎。該引擎以C++編程語言所寫， 並以LGPL受權，支援大多數網頁瀏覽標準。因爲微軟的Internet Explorer的佔有率至關高，很多以FrontPage製做的網頁均包含只有IE才能讀取的非標準語法，爲了使KHTML引擎可呈現的網頁達到最多， 部分IE專屬的語法也一併支援。目前使用KHTML的瀏覽器有Safari和Google Chrome。而KHTML也產生了許多衍生品，如：WebKit,WebCore引擎

 12.overflow hidden爲何可以清除浮動

    首先這涉及到BFC機制，

1.BFC 全稱是塊級排版上下文，用於對塊級元素排版，默認狀況下只有根元素（body)一個塊級上下文，可是若是一個塊級元素 設置了float:left，overflow:hidden或position:absolute樣式，就會爲這個塊級元素生成一個獨立的塊圾上下文，就像在window全局做用域內，聲明瞭一個function就會生成 一個獨立的做用域同樣，新開僻的BFC像是開僻了一個新的小宇宙，使這個塊圾元素內部的排版徹底獨立隔絕。
2.獨立的塊級上下文能夠包裹浮動流 ，所有浮動子元素也不會引發容器高度塌陷，也就是說包含塊會把浮動元素的高度也計算在內，因此不用清除浮動來撐起高度。

13.浮動和絕對定位的區別

    當一個元素使用絕對定位後，它的位置將依據瀏覽器左上角開始計算或相對於父容器（在父容器使用相對定位時）。 絕對定位使元素脫離文檔流，所以不佔據空間 。普通文檔流中元素的佈局就當絕對定位的元素不存在時同樣。由於 絕對定位的框與文檔流無關，因此它們能夠覆蓋頁面上的其餘元素。包括文字。　

 　而浮動元素的定位仍是基於正常的文檔流，而後從文檔流中抽出並儘量遠的移動至左側或 者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後，仍然在文檔流中的其餘元素將忽略該元素並填補他原先的空間。它只是改變了文檔流的顯示，而沒有脫離文檔流，理解了這一點，就很容易弄明白何時用定位，何時用浮動了。