前端面試問題整理第一部分

時間 2019-12-05

原文原文鏈接

簡介

整理電腦發現了以前的面試問題發出來一塊兒共享css

1 overflow 實現省略號

首先overflow的經常使用屬性：visible/hidden/scroll/auto/inherit white-space:pre/pre-wrap/nowrap/pre-line/inherit；web

<style type="text/css">
        .ellipsis{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
</style>
<p class="ellipsis" style="width: 100px;">111111111111111111111111111111111111111</p>
複製代碼

注意上面的代碼最重要的是text-overflow:ellipsis;面試

2 如何水平垂直居中

1 flex 2編程

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
複製代碼

注意外部是relative 3 table佈局 4 margin :0;注外部必須是塊級元素跨域

3 簡述position每一個項

一、static（靜態定位）：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。promise

二、relative（相對定位）：生成相對定位的元素，經過top,bottom,left,right的設置相對於其正常（原先自己）位置進行定位。可經過z-index進行層次分級。瀏覽器

不管父級存在不存在，不管有沒有TRBL，均是以父級的左上角進行定位，可是父級的Padding屬性會對其影響。緩存

三、absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。bash

四、fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。服務器

static與fixed的定位方式較好理解，在此不作分析。下面對應用的較多的relative和absolute進行分析：

4 事件執行模型

程序裏面全部的任務，能夠分紅兩類：同步任務（synchronous）和異步任務（asynchronous）。

同步任務是那些沒有被引擎掛起、在主線程上排隊執行的任務。只有前一個任務執行完畢，才能執行後一個任務。

異步任務是那些被引擎放在一邊，不進入主線程、而進入任務隊列的任務。只有引擎認爲某個異步任務能夠執行了（好比 Ajax 操做從服務器獲得告終果），該任務（採用回調函數的形式）纔會進入主線程執行。排在異步任務後面的代碼，不用等待異步任務結束會立刻運行，也就是說，異步任務不具備」堵塞「效應。

舉例來講，Ajax 操做能夠看成同步任務處理，也能夠看成異步任務處理，由開發者決定。若是是同步任務，主線程就等着 Ajax 操做返回結果，再往下執行；若是是異步任務，主線程在發出 Ajax 請求之後，就直接往下執行，等到 Ajax 操做有告終果，主線程再執行對應的回調函數。

注意主線程和任務隊列，

5 settimeout setinterval

m.jb51.net/article/991…

5 a.bind(b).bind(c)爲何後面綁定的是c 還沒徹底解決

6 promise的實現理解這個要搞

7 函數會返回一個默認的promise

8 位運算

cn.mikecrm.com/httqqWJ

位運算即在比特級別進行操做的技術。使用位運算技術能夠帶來更快的運行速度與更小的內存使用。
測試第 k 位：s & (1 << k);
設置第k位：s |= (1 << k);
關閉第k位：s &= ~(1 << k);
切換第k位：s ^= (1 << k);
乘以2的n方：s << n;
除以2的n方：s >> n;
交集：s & t;
並集：s | t;
減法：s & ~t;
提取最小非0位：s & (-s);
提取最小0位：~s & (s + 1);
交換值：x ^= y; y ^= x; x ^= y;
複製代碼