BFC是什麼，它的觸發條件，解決了那些問題

BFC：頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之亦然
觸發條件：

• float的值不是none
• position的值不是static或relative
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible
  解決的問題：避免margin的重疊(屬於同一個BFC的兩個相鄰的BOX會發生margin重疊)，自適應兩欄佈局(BFC的區域不會與float box重疊)，清除浮動(計算BFC的高度時，浮動元素也參與計算)

BFC的佈局規則

1. 內部的Box會在垂直方向，一個接一個地放置。

2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。

3. 每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。

4. BFC的區域不會與float box重疊。

5. BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。

6. 計算BFC的高度時，浮動元素也參與計算。

外邊距重疊怎麼解決

轉換為BFC盒子

vue有沒有遇到過資料改變檢視沒有更新的情況

1. vue無法檢測例項被建立時不存在於data中的property(由於Vue會在初始化例項時對property執行getter/setter轉化)
2. 不能檢測物件property的新增或移除(es5的限制，讓vue不能檢測物件屬性的新增或刪除)
3. vue不能檢測通過陣列索引直接修改一個數組項(vue不能檢測陣列和物件的變化)
4. vue不能檢測直接修改陣列長度的變化
5. 在非同步更新執行之前操作DOM資料不會變化

TCP和UDP的區別

• tcp是面向連線，udp是無連線
• tcp提供可靠服務，udp不保證可靠交付
• tcp面向位元組流，udp面向報文
• tcp連線只能一對一，udp支援多種互動通訊
• tcp首部開銷比udp大
• tcp邏輯通訊通道是全雙工的可靠通道，udp是不可靠通道

tcp為什麼是可靠的，還有其他特性嗎？

tcp連線是三次握手，傳送位元組的時候是停止等待協議，當一個位元組沒有收到時會重傳，直到接收方確認收到，並且傳送方收到接收方確認收到的確認訊息

垂直水平居中

1. 定位 + margin-top + margin-left

    .box {
      width: 1000px;
      height: 1000px;
      position: relative;
    }
    .son {
      position: absolute;
      top: 50%; 
      left: 50%;
      margin-top: -75px;
      margin-left: -50px;
      width: 100px;
      height: 150px;
    }

2. 定位 + margin

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;

3. transform：存在相容問題

      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

4. flexbox方案：存在相容問題

      display: flex;
      justify-content: center;
      align-items: center;

5. diplay: table-cell：讓盒子內文字居中，不是塊元素居中

      position: relative;
      display: table-cell;
      text-align: center;
      vertical-align: middle;

cdn是什麼？

cdn回源是什麼？

回源是協商快取還是強快取

https為什麼安全

加密以及身份驗證機制

中間人攻擊

攻擊者與通訊的兩端分別建立獨立的聯絡，並交換其收到的資料

xss怎麼去預防

對使用者的輸入進行過濾，對輸出進行編碼

怎麼用js實現xss的預防

我不懂，但我大受震驚

        function sanitize(strs, ...args){
            const dirty = strs.reduce((prev, curr, i)=> `${prev}${curr}${args[i] || ''} `,'')
            return DOMPurify.sanitize(dirty)
        }

演算法

給定一個非空整數陣列，除了某個元素只出現一次以外，其餘每個元素均出現偶數次，找出那個只出現了一次的元素

function queryOne(arr) {
  let obj = {}
  let num = null
  for (let i of arr) {
    if (obj[i]) {
      delete obj[i]
    } else {
      obj[i] = i      
    }
  }
  return Object.values(obj)[0]
}

樹的層序遍歷：