一、Css

• @support@media\calc()的相容性

  1.@support 主要檢查瀏覽器是否相容css的某個屬性

      @support 相容性為ie9以及ie9以下不相容
      https://www.cnblogs.com/yuxuan007/p/10892452.html 參考網站
  

  2.@media 不同的媒體型別定義不同的樣式 定義相容性還比較好

  參考我的另一篇文章關於相容ie 
  https://www.cnblogs.com/qishitaozi/p/15181584.html
  

  3.calc() 函式 支援“ + - * /” 相容性 ie9以及ie9以上相容

• B.垂直水平居中的寫法

  1.垂直居中

    I.line-height 行內元素
    II.Position:absolute;top:50%;transform:translateY(-50%)
    III.Display:flex;justify-content:center;align-items:center;
    IV.Display:table;display:table-cell;vertical-align:middle;
  

  2.水平居中

  I.Text-align:center;
  II.Position:absolute;left:50%;transform:translateX(-50%) 
  III.Margin:0 auto;
  IV.Display:flex;
   
  

  C. 1rem \ 1em \ 1vh \ 1px

  1rem: 相對於根元素html通常是給html設定一個字型的大小然後其他元素的單位長度就是rem
  1em: 相對於父元素的字型大小 font-size
  1vh：相對於螢幕的寬度和高度
  1px:  畫素px是相對於顯示器螢幕解析度而言的
  

  D.盒子模型

  a) Width+border+padding+margin 是w3c的盒子模型
  b) Box-sizing:Border-box; ie盒子模型 = content+padding+border
  

  E. 三角形css畫法

  a) Width:0px; height:0px;border-width:100px;border-style:solid;border-color:（上 右 下 左）
  b)Width:100px;四個border:width solid (顏色根據三角形位置否則為透明)
   
  

  F.清除浮動的幾種方式

  a)Float:left之後父元素:after{clear:both}
  b)父元素設定height
  c)父元素 overflow:hidden
  

• 二、js

  1. 遞迴

       簡單的 1+100的求和？
       var sum=0; for(var i=1;i<=100;i++){ sum = sum+i} 
        function add(num1,num2){  // 1+2 =總數  num2+1 下一個數   總數num+ num2+1
             var num = num1+num2;
             if(num2+1>100){
                 return num
             }else{
                 return add(num,num2+1)
             }
       }
     

  2. 事件代理

     定義：事件委託就是利用事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件。
     原理：事件委託是指將事件繫結到目標元素的父元素上，利用冒泡機制觸發該事件

  3. 閉包

     閉包的定義即：函式 A 內部有一個函式 B，函式 B 可以訪問到函式 A 中的變數，那麼函式 B 就是閉包

  4. es6常用的功能

     1. let 或者 const
     2. 文字模板 ``
     3. 字串插值 ${}
     4. 多行字串使用 反引號 ``解決
     5. 解構賦值
     6. 繼承 extends
     7. 用 promise 替代回撥
     8. 箭頭函式 （）=>{}
     9. for .. of
     10. 展開操作符 ...

  5. DOM物件中的方法

      1. document.getElementById() 返回對擁有指定 id 的第一個物件的引用
      2. document.getElementsByClassName() document.getElementsByName() document.getElementsByTagName()
             共同點： 返回文件中集合，作為 NodeList 物件；需要指定節點索引號
     

  6. 陣列去重

      1. es5
            function getArr(arr){
                  var newArr =[]
                  for(var n=0;n<arr.length;n++){
                      if(newArr.indexOf(arr[n])<0){
                          newArr.push(arr[n])
                      }
                  }
                  return newArr
              }
      2. es6
            a.return Array.from(new Set(陣列))
            b.[... new Set(陣列)]
     

• 三、瀏覽器基本知識點

  1. JSON & JSONP

     JSON:JSON 就是一種有規則字串。

          JSON 就是Key/Vaule儲存，理論上Key支援String、Number，Value幾乎支援所有型別。
          JSON 因為語言都支援字串（String）型別，所以都支援JSON格式作為互動。。
          JSON 是儲存和交換文字資訊的語法。類似 XML。
          JSON 比 XML 更小、更快，更易解析。
     例如：{
          "Name":"趙麗穎",
          "Stature":"165cm",
          "Birthday":"1987年10月16日",
          "Birthplace":"河北省廊坊市",
          "Info":"喜歡電視劇版《知否知否應是綠肥紅瘦》中趙麗穎扮演的盛明蘭，該劇改編自關心則亂同名小說，通過北宋官宦家庭少女明蘭的成長、愛情、婚姻故事，展開了一幅由閨閣少女到侯門主母的生活畫卷，講述一個家宅的興榮，古代禮教制度下的女性奮鬥傳奇",                  
      }
        star_male表示三個物件的陣列，每個物件有名字和年齡
        {
            "star_male": [
                {
                    "name": "趙麗穎",
                    "age": 26
                },
                {
                    "name": "楊蓉",
                    "age": 29
                },
                {
                    "name": "李健",
                    "age": 31
                }
            ]
        }
     

     JSON.parse() 可以把JSON規則的字串轉換為JSONObject

        '{"domain" : "sojson.com","author":"soso"}'  轉換為：{"domain" : "sojson.com","author":"soso"}
     

     JSON.stringify()可以把JSONObject 轉化為 JSON 規則的字串

          {"domain" : "sojson.com","author":"soso"} 轉化為 ： '{"domain" : "sojson.com","author":"soso"}'
     

     JSON.parse()、JSON.stringify() 相容性

        Firefox 3.5 + （目前已經50+版本了）
        Internet Explorer 8 +（這個...）
        Chrome（一直支援）
        Opera 10 +
        Safari 4 +
     

     JSONP 為解決跨域而誕生。是為了基於瀏覽器Web請求不通源之間的請求。

      具體講，是解決不同源，被瀏覽器監管Javascript的安全限制。
      在https://www.sojson.com呼叫https://www.sojson.com/json/是不會跨域的。
      在https://www.sojson.com 呼叫http://www.itboy.net/json/是跨域的，因為不同域名。
      在https://www.sojson.com呼叫http://a.sojson.com/search1_baidu.com.html 是跨域的。因為是不同二級域名。
      在https://www.sojson.com:8080呼叫https://www.sojson.com:8081 是跨域的。因為是不同埠。
      在https://www.sojson.com呼叫http://www.sojson.com 是跨域的。因為是不同請求協議，http和https。
      在188.188.188.20呼叫199.199.199.99 是跨域的。因為不同IP。
      在localhost呼叫127.0.0.1 也是跨域的。其實他也是不同域名。 
      JSONP只能實現GET請求
     

  2. CORS

     定義：跨域訪問資源時瀏覽器和伺服器之間如何通訊
     基本思想：是使用自定義的HTTP頭部允許瀏覽器和伺服器相互瞭解對方，從而決定請求或響應成功與否。
     相容性：IE6,IE7,Opera min 不支援CORS
     參考文件： https://www.ruanyifeng.com/blog/2016/04/cors.html
     

  3. axios

     Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

         可以在在前端解決跨域問題
           【vue.config.js】
             module.exports = {
                 devServer: {
                     proxy: {
                         '/api': {
                             // 此處的寫法，目的是為了 將 /api 替換成 https://www.baidu.com/
                             target: 'https://www.baidu.com/',
                             // 允許跨域
                             changeOrigin: true,
                             ws: true,
                             pathRewrite: {
                                 '^/api': ''
                             }
                         }}}