前端筆記

一：HTML+css

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:<p style="line-height:20px;text-align:center;font-size:12px;color:rgba(7,17,27,0.2)"></p>
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裏面去，另外兼容IE六、七、八、9的css寫法
      .bb{
           background-color:#f1ee18;/*全部識別*/
          .background-color:#00deff\9; /*IE六、七、8識別*/
          +background-color:#a200ff;/*IE六、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下，你們會在頁面看到豬字出現兩遍，重複的內容量因註釋的多少而變。解決方案：用「<!–[if !IE]> picRotate start <![endif]–>」方法寫註釋。
    9):<li/>里加 float <div/>，這是一個典型的，棘手的兼容問題，但願引發你們正視 ，給li 不一樣的屬性會有不一樣的解釋效果，ff下的解釋稍可理解，ie6下的解釋會讓你摸不着頭腦，因爲問題的複雜性，將另起一文專門討論該問題。在《ul使用心得》一文裏有相關成果，卻沒給出問題解決的過程。
    10):img下的留白。解決方案：給img設定 display:block。
    11):失去line-height。<div style=」line-height:20px」><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，緣由是<img />這個inline-block元素和inline元素寫在一塊兒了。解決方案：讓img 和文字都 float起來。
    12):連接的hover狀態。a:hover img{width:300px} 咱們想讓鼠標hover時，連接裏包含的圖片寬度變化，惋惜在ie6下無效，ie七、ff下有效。
    13):非連接的hover狀態。div:hover{} 這樣的樣式ie6是不認的，在ie七、ff下才有效果。
    14):ie下overflow:hidden對其下的絕對層position:absolute或者相對層position:relative無效。解決方案：給overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie七、ff不支持。
    15):ie6下嚴重的bug，float元素如沒定義寬度，內部若有div定義了height或zoom:1，這個div就會佔滿一整行，即便你給了寬度。float元素若是做爲佈局用或複雜的容器，都要給個寬度的。
    16):ie6下的bug，絕對定位的div下包含相對定位的div，若是給內層相對定位的div高度height具體值，內層相對層將具備100%的width值，外層絕對層將被撐大。解決方案給內層相對層float屬性。
    17):ie6下的bug，<head></head>內有<base target=」_blank」/>的狀況下，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.若父子盒子都有透明度的時候，透明度取值爲二者相乘。

二.js兼容

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;
<!--別走開稍後繼續更新-->