前端面試技巧

時間 2019-11-17

原文原文鏈接

一、頁面佈局

題目：假設高度已知，請寫出三欄佈局，左右各300px，中間自適應。
乍一看是否是很簡單嗎？那麼答案應該回答幾種？
思考的你是否是已經有答案了。像這種題，通常的面試者會給出兩種答案一、浮動二、絕對定位若是隻是這兩種答案，那麼在面試者看來你尚未讓面試者滿意嗷。這種題是一種開放性的題目，這種題寫出兩種，不及格，三種算是能及格，寫出四種給你優秀，能寫出五種說明你很優秀。
下面來公佈答案來一、浮動
javascript

<section class="sec1">
  <style media="screen">
    .sec1 .left {
      float: left;
    }
    .sec1 .right {
      float: right;
    }
  </style>
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center">浮動 ： center--center--center--</div>
</section>
複製代碼

二、絕對定位
css

<section class="sec2">
  <style media="screen">
  .sec2 {
    margin-top: 20px;
    position: relative;
  }
  .sec2 > div {
    position: absolute;
  }
  .sec2 .left {
    left: 0;
  }
  .sec2 .right {
    right: 0;
  }
  .sec2 .center {
    left: 300px;
    right: 300px;
  }
  </style>
  <div class="left">left</div>
  <div class="center">絕對定位 ： center--center--center--</div>
  <div class="right">right</div>
</section>
複製代碼

三、flexbox
html

<section class="sec3">
  <style media="screen">
    .sec3 {
      margin-top: 240px;
      display: flex;
    }
    .sec3 .center {
      flex: 1;
    }
  </style>
  <div class="left">left</div>
  <div class="center">flex : center--center--center--</div>
  <div class="right">right</div>
</section>
`
複製代碼

四、表格佈局
java

<section class="sec4">
      <style media="screen">
        .sec4 {
          margin-top: 20px;
          display: table;
          width: 100%
        }
        .sec4 > div {
          display: table-cell;
        }
      </style>
      <div class="left">left</div>
      <div class="center">表格佈局 : center--center--center--</div>
      <div class="right">right</div>
    </section>
複製代碼

五、網格佈局
面試

<style media="screen">
.sec5 {
 margin-top: 20px;
 display: grid;
 width: 100%;
 grid-template-columns: 300px auto 300px;
}
</style>
<section class="sec5">
  <div class="left">left</div>
  <div class="center">網格佈局 : center--center--center--</div>
  <div class="right">right</div>
</section>
複製代碼

二、css盒模型

css盒模型想必你們都很是熟悉，這種看似簡單的題實際上是最很差答的。
若是隻回答標準模型和IE模型，那麼恭喜你，尚未贏得面試官的芳心歐，那麼針對這類的題目咱們該怎麼回答呢？本文將會從如下幾個方面談談盒模型。
基本本概念：標準模型和IE模型
CSS如何設置這兩種模型
JS如何設置獲取盒模型對應的寬和高
BFC（邊距重疊解決方案）
下面咱們來一一解答
盒模型的組成你們確定都懂，由裏向外content,padding,border,margin。
盒模型是有兩種標準的，一個是標準模型，一個是IE模型。
回答上盒模型的組成和這兩種標準是基本的。那麼若是接下來你能回答出來這兩種盒模型之間互相怎樣轉換？那麼他們怎麼進行相互轉換的呢？想必你也不陌生吧。
/* 標準模型 /
box-sizing:content-box;
/ IE模型 */
box-sizing:border-box;
第三個問題，JS怎麼獲取和設置box的寬高呢，你能想到幾種方法？
算法

dom.style.width/height瀏覽器

這種方式只能取到dom元素內聯樣式所設置的寬高，也就是說若是該節點的樣式是在style標籤中或外聯的CSS文件中設置的話，經過這種方法是獲取不到dom的寬高的。安全
dom.currentStyle.width/heightbash

這種方式獲取的是在頁面渲染完成後的結果，就是說無論是哪一種方式設置的樣式，都能獲取到。但這種方式只有IE瀏覽器支持。框架

window.getComputedStyle(dom).width/height

這種方式的原理和2是同樣的，這個能夠兼容更多的瀏覽器，通用性好一些。

dom.getBoundingClientRect().width/height

這種方式是根據元素在視窗中的絕對位置來獲取寬高的

5.dom.offsetWidth/offsetHeight

這個就沒什麼好說的了，最經常使用的，也是兼容最好的。回答到這，面試的你確定讓面試官眼前一亮
那麼接下來在說一下邊距重疊的問題以及邊距重疊的解決方案，那麼這到題你就回答的基本上完美了。
兩個box若是都設置了邊距，那麼在垂直方向上，兩個box的邊距會發生重疊，以絕對值大的那個爲最終結果顯示在頁面上。
父子關係的邊距重疊：父元素沒有設置margin-top，而子元素設置了margin-top：20px;能夠看出，父元素也一塊兒有了邊距。
邊距重疊解決方案(BFC)
首先要明確BFC是什麼意思，其全英文拼寫爲 Block Formatting Context 直譯爲「塊級格式化上下文」
BFC的原理
一、內部的box會在垂直方向，一個接一個的放置
二、每一個元素的margin box的左邊，與包含塊border
box的左邊相接觸（對於從作往右的格式化，不然相反）
三、box垂直方向的距離由margin決定，屬於同一個bfc的兩個相鄰box的margin會發生重疊
四、bfc的區域不會與浮動區域的box重疊
五、bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc裏的元素，反過來，裏面的也不會影響外面的
六、計算bfc高度的時候，浮動元素也會參與計算
BFC如何產生–

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
在屬性值爲這些的狀況下，都會讓所屬的box產生BFC。