前端跳槽面試總結之頁面佈局、CSS盒模型、DOM 事件和 HTTP 協議類

一、頁面佈局

題目：假設高度已知，請寫出三欄佈局，其中左欄、右欄寬度各位 300px，中間自適應。
對於這個頁面佈局，有五種寫法，浮動佈局、絕對佈局、flexbox 佈局、表格佈局和網格佈局，如下所示：

浮動佈局，代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <section class="layout float">
      <style media="screen">
      .layout.float .left{
        float:left;
        width:300px;
        background: red;
      }
      .layout.float .center{
        background: yellow;
      }
      .layout.float .right{
        float:right;
        width:300px;
        background: blue;
      }
      </style>
      <h1>三欄佈局</h1>
      <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h2>浮動解決方案</h2>
          1.這是三欄佈局的浮動佈局
          2.這是三欄佈局的浮動佈局
          3.這是三欄佈局的浮動佈局
        </div>
      </article>
    </section>
  </body>
</html>

絕對佈局，代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <section class="layout absolute">
      <style>
        .layout.absolute .left-center-right>div{
          position: absolute;
        }
        .layout.absolute .left{
          left:0;
          width: 300px;
          background: red;
        }
        .layout.absolute .center{
          left: 300px;
          right: 300px;
          background: yellow;
        }
        .layout.absolute .right{
          right:0;
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三欄佈局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>絕對定位解決方案</h2>
          1.這是三欄佈局的絕對佈局
          2.這是三欄佈局的絕對佈局
          3.這是三欄佈局的絕對佈局
        </div>
        <div class="right"></div>
      </article>
    </section>

  </body>
</html>

flexbox 佈局，代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <section class="layout flexbox">
      <style>
        .layout.flexbox{
          margin-top: 110px;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
          flex:1;
          background: yellow;
        }
        .layout.flexbox .right{
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三欄佈局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>flexbox解決方案</h2>
          1.這是三欄佈局的 flexbox 佈局
          2.這是三欄佈局的 flexbox 佈局
          3.這是三欄佈局的 flexbox 佈局
        </div>
        <div class="right"></div>
      </article>
    </section>

  </body>
</html>

表格佈局，代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <section class="layout table">
      <style>
        .layout.table .left-center-right{
          width:100%;
          height: 100px;
          display: table;
        }
        .layout.table .left-center-right>div{
          display: table-cell;
        }
        .layout.table .left{
          width: 300px;
          background: red;
        }
        .layout.table .center{
          background: yellow;
        }
        .layout.table .right{
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三欄佈局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>表格佈局解決方案</h2>
          1.這是三欄佈局的表格佈局
          2.這是三欄佈局的表格佈局
          3.這是三欄佈局的表格佈局
        </div>
        <div class="right"></div>
      </article>
    </section>

  </body>
</html>

網格佈局，代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
      html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <section class="layout grid">
      <style>
        .layout.grid .left-center-right{
          width:100%;
          display: grid;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 300px;
        }
        .layout.grid .left-center-right>div{

        }
        .layout.grid .left{
          width: 300px;
          background: red;
        }
        .layout.grid .center{
          background: yellow;
        }
        .layout.grid .right{

          background: blue;
        }
      </style>
      <h1>三欄佈局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>網格佈局解決方案</h2>
          1.這是三欄佈局的網格佈局
          2.這是三欄佈局的網格佈局
          3.這是三欄佈局的網格佈局
        </div>
        <div class="right"></div>
      </article>
    </section>

  </body>
</html>

對於這五種方案，優缺點的比較，如下所示：

float，比較好的兼容性需要清除浮動，處理好與周邊元素的關係
absolute，方便快捷，佈局脫離文檔流，導致方案的可使用性較差
flex 佈局，解決上述兩個的缺點，移動端使用 flex 更多，ie8 不支持
table-ceil 佈局，兼容性好，對 SEO 不夠友好，每一個部分可以理解爲單元格，當其中的一個表格高度變高，其他的兩個表格也會變高
grid 佈局，代碼量簡潔，新技術

如果中間高度不固定，這五種方案會有什麼樣的情況，如下所示：

float不能用，中間的內容被左側擋住，因爲撐開高度以後，左側沒有了遮擋物，就會流向左側。
解決方案：創建 BFC
absolute 不能用
flex 可以使用
table-ceil 可以使用
grid 不能用

對於頁面佈局的小結，語義化掌握到位，頁面佈局理解深刻，CSS 基礎知識紮實、思維靈活且積極上進、代碼書寫規範。
對於頁面佈局的變通，如下所示：

三欄佈局，左右寬度高度固定及中間自適應、上下寬度固定及中間自適應
兩欄佈局，左寬度固定及右自適應、右寬度固定及左自適應、上高度固定及下自適應、下高度固定及上自適應

二、CSS 盒模型

題目: 談談你對 CSS 盒模型的認識。
對於盒模型的這道題，可以從基本概念：標準模型 + IE 模型、標準模型和 IE 模型區別、CSS 如何設置者兩種模型、JS 如何設置獲取盒模型對應的寬和高、根據盒模型接收解釋邊距重疊、BFC 邊距重疊解決方案這幾個方面去考慮和回答。
對於盒模型的基本概念，文檔中每個元素都會被描述爲一個矩形盒子，盒子有一個邊界，分別爲 margin edge，border edge，padding edge，content edge。盒子模型分爲標準盒子模型和 IE 盒子模型。
對於標準模型，它的寬度是內容 content 的寬度，不包括 border 和 padding 的寬度，也就是說 width = content。而對於 IE 模型，它的寬度是內容 content 的寬度、內邊距 padding 和邊框 border 的寬度之和，也就是說 width = content + border + padding。
對於 CSS 如何設置者兩種模型，有 box-sizing 這個屬性。當 box-sizing 屬性值爲 content-box 的時候，說明就是標準模型。當 box-sizing 屬性值爲 border-box 的時候，說明就是 IE 模型。瀏覽器默認是標準模型。
對於 JS 如何設置獲取盒模型對應的寬和高，有以下四種方式：

dom.style.width/height
dom.currentStyle.width/height //渲染之後的寬高只IE支持
window.getComputedStyle(dom).width/height //所有瀏覽器支持渲染之後的寬高
dom.getBoundingClientRect().width/height //計算元素的絕對位置，根據viewport左上角確定，會得到left top width height

根據盒模型接收解釋邊距重疊，存在幾種情況。父子元素邊距重疊、兄弟元素邊距重疊和空元素邊距重疊，代碼如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS盒模型</title>
    <style media="screen">
      html *{
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
      <section class="box" id="sec">
        <style media="screen">
          #sec{
            background: #f00;
          }
          .child{
            height: 100px;
            margin-top: 10px;
            background: yellow
          }
        </style>
        <article class="child"></article>
      </section>
  </body>
</html>

BFC，邊距重疊解決方案，也是塊級格式化上下文。對於 BFC 的原理，如下所示：

BFC 元素垂直方向的邊距發生重疊
BFC 的區域不會與浮動元素的box 重疊
BFC 是頁面上一個獨立的容器，內外的元素不會相互影響
計算 BFC 的高度時，浮動元素也參與計算

創建 BFC，如下所示：

float 值不爲 none
position 爲 absolute 或 fixed
display 爲 inline-block，table-cell，table-caption，flex；
overflow 不爲 visible

對應 BFC 解決邊距重疊的代碼，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS盒模型</title>
    <style media="screen">
      html *{
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
      
      <!-- BFC垂直方向邊距重疊 -->

      <section id="margin">
        <style>
          #margin{
            background: pink;
            overflow: hidden;
          }
          #margin>p{
            margin: 5px auto 25px;
            background: red;
          }
        </style>
        <p>1</p>
        <div style="overflow:hidden">
          <p>2</p>
        </div>
        <p>3</p>
      </section>

      <!-- BFC不與float重疊 -->
      <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
      </section>

      <!-- BFC子元素即使是float也會參與計算 -->
      <section id="float">
        <style media="screen">
          #float{
            background: red;
            overflow: auto;
            /*float: left;*/
          }
          #float .float{
            float: left;
            font-size: 30px;
          }
        </style>
        <div class="float">我是浮動元素</div>
      </section>

  </body>
</html>

三、DOM 事件

對於 DOM 事件類，分爲基本概念：DOM 事件的級別、DOM 事件模型、DOM 事件流、描述 DOM 事件捕獲的具體流程、Event 對象的常見應用和自定義事件等等。
對於 DOM 事件的級別，如下所示：

DOM0 element.οnclick=function(){}
DOM2 element.addEventListener(‘click’,function(){},fasle);
DOM3 element.addEventListener(‘keyup’,function(){},false)

對於 DOM 事件模型，分爲捕獲和冒泡這兩種。捕獲是從上到下，冒泡是從下到上。
對於 DOM 事件流，分爲三個階段，如下所示：

第一階段：捕獲
第二階段：目標階段
第三階段：冒泡從目標元素上傳到 window 對象

對於描述 DOM 事件捕獲的具體流程，window–>document–>html(document.documentElement)–> body–>…–>目標元素。
對於 Event 對象的常見應用，如下所示：

e.target //當前被點擊的元素
e.preventDefault()
e.currentTarget //代理中的父元素
e.stopPropagation()
e.stopImmediatePropagation() //按鈕綁定了兩個click事件A、B，希望點擊A之後加上這句話，就可以阻止B的執行。

對於自定義事件，也稱爲模擬事件，如下所示：

var eve=new Event(‘custome’);
ev.addEventListener(‘custome’,function(){console.log(‘custom’); })
ev.dispatchEvent(eve);

對於 DOM 事件的代碼，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Event</title>
  </head>
  <body>
      <div id="ev">
        <style media="screen">
          #ev{
            width: 300px;
            height: 100px;
            background: red;
            color: #fff;
            text-align: center;
            line-height: 100px;
          }
        </style>
        目標元素
      </div>
      <script type="text/javascript">
        var ev = document.getElementById('ev');

        ev.addEventListener('click', function (e) {
            console.log('ev captrue');
        }, true);

        window.addEventListener('click', function (e) {
            console.log('window captrue');
        }, true);

        document.addEventListener('click', function (e) {
            console.log('document captrue');
        }, true);

        document.documentElement.addEventListener('click', function (e) {
            console.log('html captrue');
        }, true);

        document.body.addEventListener('click', function (e) {
            console.log('body captrue');
        }, true);

        var eve = new Event('test');
        ev.addEventListener('test', function () {
            console.log('test dispatch');
        });
        setTimeout(function () {
            ev.dispatchEvent(eve);
        }, 1000);
      </script>
  </body>
</html>

四、HTTP 協議類

對於 HTTP 協議類，分爲 HTTP 協議的主要特點、HTTP 報文的組成部分、HTTP 方法、POST 和GET 的區別、HTTP 狀態碼、持久連接和管線化。
對於 HTTP 協議的主要特點，如下所示：

簡單快速
靈活
無連接，鏈接一次就會斷掉，不會持久鏈接
無狀態

對於 HTTP 報文的組成部分，分爲請求報文和響應報文，如下所示：

請求報文，包括請求行（http方法、頁面地址、http協議及版本）、請求頭（告訴服務端我要什麼內容）、空行和請求體
響應報文，包括狀態行、響應頭、空行和響應體

對於 HTTP 方法，前五個必須記住，如下所示：

GET ——>獲取資源
POST ——>傳輸資源
PUT ——>更新資源
DELETE ——>刪除資源
HEAD ——>獲得報文首部
OPTIONS ——>詢問支持的方法
TRACE ——>追蹤路徑
CONNECT ——>要求用隧道協議連接代理

對於 POST 和 GET 的區別，如下所示：

GET 在瀏覽器回退是無害的，而 POST 請求會再次提交請求
GET 產生的 URL 地址可以被收藏，而 POST 不可以
GET 請求會被瀏覽器主動緩存，而 POST 不會，除非手動設置
GET 請求只能進行 URL 編碼，而 POST 支持多種編碼方式
GET 請求參數會被完整保留在瀏覽器歷史記錄裏，而 POST 中的參數不會被保留
GET 請求在 URL 中傳送的參數是有長度限制的，而 POST 沒有限制
對參數的數據類型，GET只接受 ASCII 字符，而 POST沒有限制
GET比 POST 更不安全，因爲傳遞的參數直接暴露在 URL 上，所以不能用來傳遞敏感信息
GET 參數通過 URL 傳遞，POST 放在 Request Body中

對於 HTTP 狀態碼，如下所示：

1xx:指示信息——表示請求已接收，繼續處理
2xx:成功——表示請求已被成功接收
3xx:重定向——要完成請求必須進行更進一步的操作
4xx:客戶端錯誤——請求有語法錯誤或請求無法實現
5xx:服務器錯誤——服務器未能實現合法的請求

對於具體的 HTTP 狀態碼，如下所示：

200 OK：客戶端請求成功
206 partial Content:客戶發送了一個帶有 Range 頭的 GET 請求，服務器完成了它
301 Moved Permanently:所請求的頁面已經轉移至新的 URL
302 Fonud:所請求的頁面已經臨時轉移至新的 url
304 Not Modified：客戶端有緩存的文檔併發出了一個條件性的請求，服務器告訴客戶，原來緩衝的文檔還可以繼續使用
400 Bad Request：客戶端請求有語法錯誤，不能被服務器所理解
401 Unauthoried：請求未經授權，這個狀態碼必須和 WWW-Authenticate 報頭域一起使用
403 Forbidden：對被請求頁面的訪問禁止
404 Not Found：請求的資源不存在
500 Internal Server Error：服務器發生不可預期的錯誤原來緩存的文檔還可以繼續使用
503 Server Unavailable：請求未完成，服務器臨時過載或當機，一段時間後可能恢復正常。

對於持久連接，如下所示：

HTTP 協議採用的是“請求-應答模式”，當使用普通模式，即非 Keep-Alive 模式時，每個請求/應答客戶和服務器都要新建一個連接，完成之後立即斷開連接（HTTP協議爲無連接的協議）
當使用 Keep-Alive 模式（又稱持久鏈接、連接重用）時，Keep-Alive 功能使客戶端到服務器端的連接有效，當出現對服務器的後繼請求時，Keep-Alive 功能避免了建立或者重新建立連接

對於管線化，如下所示：

在使用持久鏈接的情況下，某個連接上消息的傳遞類似於， 請求1->響應1->請求2->響應2->請求3->響應3，整個連接一直沒有斷開的
某個連接上的消息變成了類似這樣，請求1->請求2->請求3->響應1->響應2->響應3

對於管線化的具體理解，如下所示：

管線化機制通過持久連接完成，僅 HTTP/1.1 支持此技術
只有 GET和 Head 請求可以管線化，而 POST 則有所限制
初次創建連接時不應啓動管線機制，因爲對方（服務器）不一定支 HTTP/1.1 版本的協議
HTTP/1.1 要求服務器端支持管線化，但並不要求服務器端也對響應進行管線化處理，只是要求對於管線化的請求不失敗即可
由於上面提到的服務器端問題，開啓管線化很可能並不會帶來大幅度的性能提升，而很多服務器端和代理程序對管線化的支持並不好。因此現代瀏覽器如 Chrome 和 Firefox 默認並未開啓管線化支持
管線化不會影響響應到來的順序，如上面的例子所示，響應返回的順序並未改變

前端跳槽面試總結之頁面佈局、CSS盒模型、DOM 事件和 HTTP 協議類

一、頁面佈局

二、CSS 盒模型

三、DOM 事件

四、HTTP 協議類

axios 源碼深入分析之源碼實現分析

axios 源碼深入分析之 HTTP 和 json-server

axios 源碼深入分析之 XHR 和 axios 的理解和使用

react 項目中在開發時跨域問題的解決

前端框架面試之 Vue 的使用和 Vue 的原理萬字長文總結

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

前端跳槽面試總結之頁面佈局、CSS盒模型、DOM 事件 和 HTTP 協議類

一、頁面佈局

二、CSS 盒模型

三、DOM 事件

四、HTTP 協議類

前端跳槽面試總結之頁面佈局、CSS盒模型、DOM 事件和 HTTP 協議類