摘要：一嚴格模式與混雜模式如何觸發這兩種模式，區分它們有何意義聲明位于文檔中的最前面的位置，處于標簽之前。包含過渡和的也導致頁面以標準模式呈現，但是有過渡而沒有會導致頁面以混雜模式呈現。不存在或形式不正確會導致和文檔以混雜模式呈現。

1.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
  Doctype聲明位于文檔中的最前面的位置，處于標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。該標簽可聲明三種DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
    當瀏覽器廠商開始創建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現這一點，他們創建了兩種呈現模式：標準模式和混雜模式（quirks mode）。在標準模式中，瀏覽器根據規范呈現頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器（比如Microsoft IE 4和Netscape Navigator 4）的行為以防止老站點無法工作。
    瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標準模式呈現。對于HTML 4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現，但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
2.行內元素有哪些？塊級元素有哪些？CSS的盒模型？
  行內元素有：a b span I b em img input select strong
  塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
  w3c標準盒模型：margin border padding content
  IE盒模型：IE的content部分包含了 border 和 padding
3.CSS引入的方式有哪些? link和@import的區別是?
 link、@import
 區別：
    1):link屬于xhtml標簽，@import屬于css標簽;
    2):兼容性問題link無問題而@import屬于css2.1提出的所有老瀏覽器不支持，IE5以上才支持;
    3):js可控制DOM改變樣式只能用link而@impor不可以，因為@import不支持;
    4):頁面加載link快于@import，使用link瀏覽器會并行下載資源并且不會停止對當前文檔的處理，@import需要頁面網頁完全載入以后加載;
4.關于CSS specificity
  CSS 的specificity 特性或稱非凡性，它是衡量一個衡量CSS值優先級的一個標準，既然作為標準，就具有一套相關的判定規定及計算方式，specificity用一個四位的數字串(CSS2是三位)來表示，更像四個級別
  !important >內聯(1000)>  id(0100)> class(0010) > tag(0001)
  ps:內聯eg:

5.前端頁面由哪三層構成，分別是什么？作用是什么？
  網頁分成三個層次，即：結構層、表示層、行為層。
  網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責創建。標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關于如何顯示有關內容的信息。例如，P 標簽表達了這樣一種語義：“這是一個文本段。”
  網頁的表示層（presentation layer） 由 CSS 負責創建。 CSS 對“如何顯示有關內容”的問題做出了回答。
  網頁的行為層（behavior layer）負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。
  w3c-->萬維網聯盟于1994年成立制定結構+表現標準
  ECMA-->European Computer Manufacturers Association制定的行為標準
6.css兼容問題(都是IE的錯，淘寶不兼容IE8，我只想說Nice Job)
    1):就是ie6雙倍邊距的問題，在使用了float的情況下，不管是向左還是向右都會出現雙倍，最簡單的解決方法就是用display:_inline;加到css里面去，另外兼容IE6、7、8、9的css寫法
      .bb{
           background-color:#f1ee18;/*所有識別*/
          .background-color:#00deff9; /*IE6、7、8識別*/
          +background-color:#a200ff;/*IE6、7識別*/
          _background-color:#1e0bd1;/*IE6識別*/ 
       } 。
    2):文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實際占高16px，下留白3px，ff下實際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設定 line-height 。確保所有文字都有默認的 line-height 值。這點很重要，在高度上我們不能容忍1px 的差異。
    3):ff下容器高度限定，即容器定義了height之后，容器邊框的外形就確定了，不會被內容撐大，而ie下是會被內容撐大，高度限定失效。所以不要輕易給容器定義height。
    4):還討論內容撐破容器問題，橫向上的。如果float 容器未定義寬度，ff下內容會盡可能撐開容器寬度，ie下則會優先考慮內容折行。故，內容可能撐破的浮動容器需要定義width。
    5):浮動的清除，ff下不清除浮動是不行的，清除浮動方式，常用清除浮動:
       .clearfix:after {
             clear: both;
             content: ".";
             display: block;
             visibility: hidden;
             height: 0;
       }
    6):mirrormargin bug，當外層元素內有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。padding也會出現類似問題，都是ie6下的特產，該類bug 出現的情況較為復雜，遠不只這一種出現條件，還沒系統整理。解決方案：外層元素設定border 或 設定float。
    7):吞吃現象，限于篇幅，我就不展開了。還是ie6，上下兩個div，上面的div設置背景，卻發現下面沒有設置背景的div 也有了背景，這就是吞吃現象。對應上面的背景吞吃現象，還有滾動下邊框缺失的現象。解決方案：使用zoom:1。這個zoom好象是專門為解決ie6 bug而生的。
    8):注釋也能產生bug~~~“多出來的一只豬。”這是前人總結這個bug使用的文案，ie6的這個bug下，大家會在頁面看到豬字出現兩遍，重復的內容量因注釋的多少而變。解決方案：用“ picRotate start ”方法寫注釋。
    9):
里加 float 
，這是一個典型的，棘手的兼容問題，希望引起大家正視 ，給li 不同的屬性會有不同的解釋效果，ff下的解釋稍可理解，ie6下的解釋會讓你摸不著頭腦，由于問題的復雜性，將另起一文專門討論該問題。在《ul使用心得》一文里有相關成果，卻沒給出問題解決的過程。
    10):img下的留白。解決方案：給img設定 display:block。
    11):失去line-height。
文字
，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。
    12):鏈接的hover狀態。a:hover img{width:300px} 我們想讓鼠標hover時，鏈接里包含的圖片寬度變化，可惜在ie6下無效，ie7、ff下有效。
    13):非鏈接的hover狀態。div:hover{} 這樣的樣式ie6是不認的，在ie7、ff下才有效果。
    14):ie下overflow:hidden對其下的絕對層position:absolute或者相對層position:relative無效。解決方案：給overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
    15):ie6下嚴重的bug，float元素如沒定義寬度，內部如有div定義了height或zoom:1，這個div就會占滿一整行，即使你給了寬度。float元素如果作為布局用或復雜的容器，都要給個寬度的。
    16):ie6下的bug，絕對定位的div下包含相對定位的div，如果給內層相對定位的div高度height具體值，內層相對層將具有100%的width值，外層絕對層將被撐大。解決方案給內層相對層float屬性。
    17):ie6下的bug，內有的情況下，position:relative層下的float層內文字無法選中。
    18):終于來了個ff的缺點。width:100%這個東西在ie里用很方便，會向上逐層搜索width值，忽視浮動層的影響，ff下搜索至浮動層結束，如此，只能給中間的所有浮動層加width:100%才行，累啊。opera這點倒學乖了跟了ie。
    19):Chrome 中文界面下默認會將小于 12px 的文本強制按照12px顯示 
       可通過加入CSS 屬性 -webkit-text-size-adjust: none;
    20):超鏈接訪問過后hover樣式就不出現了,被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
       L-V-H-A :a:link(未訪問) {} a:visited(已訪問) {} a:hover {} a:active {}   
 8.如何居中一個浮動元素?
    div{
         position:relative/absolute;
         margin: -150px 0 0 -250px;
         left:50%;
         top:50%;
         Width:500px;
         height:300px;
     }
 9.清楚瀏覽器默認樣式-->網上的reset.css多的是
 10.若父子盒子都有透明度的時候，透明度取值為兩者相乘。

1. 獲取外部屬性
    
    1> 兼容性問題
        getComputedStyle(標簽)["屬性"]  //火狐谷歌safari都可以,IE不支持
        box.currentStyle["屬性"]        //IE支持
    2> 解決方案
        function getStyle(elem, property){
            //判斷在該瀏覽器中currentStyle方法存不存在,存在就用IE瀏覽器方式獲取,否則用其他瀏覽器     的方式獲取.
            return elem.currentStyle ? elem.currentStyle[property] : getComputedStyle(elem)[property];
        }

2. 事件參數

    1> 兼容性問題

        even            //IE不兼容
        window.event  //IE識別

    2> 解決方案
        var e = even || window.event;

3. 清除事件的冒泡

    1> 兼容性問題
        e.cancelBubble();        //IE
        e.stopPropagation();    //存在低版本的IE兼容性問題.其他瀏覽器都支持.
    2> 解決方案
        window.event ? e.cancelBubble = true : e.stopPropagation();
        //通過window.event判斷當前瀏覽器是否是IE

4. 事件中獲取當前對象

    1> 兼容性問題
        e.srcElement   //IE
        e.target       //IE不兼容(在這里的this IE也不兼容)
    2> 解決方案
        window.event ? e.srcElement : e.target;

5.兼容性問題（cookie）

    IE 火狐支持本地緩存；

    谷歌不支持本地緩存，只支持服務器緩存；

6. 兼容性問題（添加監聽器）
    
    addEventListener() (IE8及以下不支持)；

7. 阻止瀏覽器默認行為

    preventDefault(); //w3c的阻止瀏覽器默認行為
    window.event.returnValue = true;  //IE的阻止瀏覽器默認行為;

    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }

9. 獲取瀏覽器滾動高度

    var scroll = document.body.scrollTop || document.documentElement.scrollTop;