立即收藏！2019前端工程師如何應對裁員潮？

前言

2019互聯網寒冬已至，大批互聯網公司紛紛裁員，其實從2018年下半年開始，裁員和市場部收縮預算就經常被提及，阿里巴巴，華爲都傳出了收縮招聘的新聞。網易的遊戲部門和門戶部門也先後裁員，趣店裁員90%，鬥魚裁員30%。小肆也是被這些消息嚇得瑟瑟發抖，不過生活就是這樣，誰也無法預料到第二天會發生什麼，只有把握好現在，積極爲未知的明天做好準備纔是正道。

這裏小肆給大家幾點建議：

對於目前在職的同學，保持學習，提升自己核心競爭力，讓自己成爲不會被輕易替代的那個人。
對於必須面臨重新找工作的同學，積極複習，多多刷題，把技術基礎打牢，這樣才容易在面試競爭中獲取領先地位。

小肆深知找工作的不易，今天給大家精選了一些前端近一年常見的面試題，供大家複習，即便是在職的同學，也推薦有空就看看，保持憂患意識在目前的大環境下是非常有必要的。

HTML篇

Doctype作用？標準模式與兼容模式各有什麼區別?

<!DOCTYPE>聲明位於HTML文檔中的第一行，處於 <html> 標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點無法工作。

1.HTML5 爲什麼只需要寫 `<!DOCTYPE HTML>`？

HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

2.行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

首先：CSS規範規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值爲“block”，則爲“塊級”元素；span默認display屬性值爲“inline”，是“行內”元素。

1. 行內元素有：a b span img input select strong（強調的語氣）
2. 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…
3. 常見的空元素：
        `<br>` `<hr>` `<img>` `<input>` `<link>` `<meta>`
   **說這些可能會加分的**：
        `<area>` `<base>` `<col>` `<command>` `<embed>` `<keygen>` `<param>` `<source>` `<track>` `<wbr>`

3.頁面導入樣式時，使用link和@import有什麼區別？

link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用於加載CSS;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
link支持使用js控制DOM去改變樣式，而@import不支持;

4.介紹一下你對瀏覽器內核的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

    渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。

5. 常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

6.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。

  繪畫 canvas;
  用於媒介回放的 video 和 audio 元素;
  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
  sessionStorage 的數據在瀏覽器關閉後自動刪除;
  語意化更好的內容元素，比如 article、footer、header、nav、section;
  表單控件，calendar、date、time、email、url、search;
  新的技術webworker, websocket, Geolocation;

移除的元素：

純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還需要添加標籤默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim;

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

如何區分HTML5： DOCTYPE聲明/新增的結構元素/功能元素

7.簡述一下你對HTML語義化的理解？

用正確的標籤做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

8. HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？

在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。

    **原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。**

如何使用：

頁面頭部像下面一樣加入一個manifest的屬性；
在cache.manifest文件的編寫離線存儲的資源；
```
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
```
3、在離線狀態時，操作window.applicationCache進行需求實現。

9.瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源並進行離線存儲。

    離線的情況下，瀏覽器就直接使用離線存儲的資源。

10.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。

    cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
    sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小：

cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

有期時間：

localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

11.iframe有那些缺點？

iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。

12.Label的作用是什麼？是怎麼用的？

label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

13.HTML5的form如何關閉自動完成功能？

給不想要提示的 form 或某個 input 設置爲 autocomplete=off。

14.如何實現瀏覽器內多個標籤頁之間的通信?

WebSocket、SharedWorker；
也可以調用localstorge、cookies等本地存儲方式；

localstorge另一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信；
在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

15.webSocket如何兼容低瀏覽器？

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基於 multipart 編碼發送 XHR 、
基於長輪詢的 XHR

16.頁面可見性（Page Visibility API）可以有哪些用途？

通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其他後臺進程的時候，自動暫停音樂或視頻的播放；

17.如何在頁面上實現一個圓形的可點擊區域？

map+area或者svg
border-radius
純js實現需要求一個點在不在圓上簡單算法、獲取鼠標座標等等

18.實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

19.網頁驗證碼是幹嘛的，是爲了解決什麼安全問題。

區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

20.title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：會重讀，而是展示強調內容。
i內容展示爲斜體，em表示強調的文本；
Physical Style Elements -- 自然樣式標籤
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標籤
strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 如果不能確定時首選使用自然樣式標籤。

CSS篇

1.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？

（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；
（3）區別： IE的content部分把 border 和 padding計算了進去;

2.CSS選擇符有哪些？哪些屬性可以繼承？

id選擇器（ # myid）
類選擇器（.myclassname）
標籤選擇器（div, h1, p）
相鄰選擇器（h1 + p）
子選擇器（ul > li）
後代選擇器（li a）
通配符選擇器（ * ）
屬性選擇器（a[rel = "external"]）
僞類選擇器（a:hover, li:nth-child）

可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;

3.CSS優先級算法如何計算？

優先級就近原則，同權重情況下樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;

優先級爲:

同權重: 內聯樣式表（標籤內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
!important >  id > class > tag
important 比 內聯優先級高

4.CSS3新增僞類有那些？

舉例：
p:first-of-type 選擇屬於其父元素的首個  元素的每個  元素。
p:last-of-type 選擇屬於其父元素的最後  元素的每個  元素。
p:only-of-type 選擇屬於其父元素唯一的  元素的每個  元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個  元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個  元素。

::after 在元素之前添加內容,也可以用來做清除浮動。
::before 在元素之後添加內容
:enabled
:disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。

5.如何居中div？

水平居中：給div設置一個寬度，然後添加margin:0 auto屬性

div{
    width:200px;
    margin:0 auto;
 }

讓絕對定位的div居中

div {
    position: absolute;
    width: 300px;
    height: 300px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: pink;    /* 方便看效果 */
}

水平垂直居中一
確定容器的寬高寬500 高 300 的層
設置層的外邊距

div {
        position: relative;        /* 相對定位或絕對定位均可 */
        width:500px;
        height:300px;
        top: 50%;
        left: 50%;
        margin: -150px 0 0 -250px;         /* 外邊距爲自身寬高的一半 */
        background-color: pink;         /* 方便看效果 */
}

水平垂直居中二
未知容器的寬高，利用 transform 屬性

div {
        position: absolute;        /* 相對定位或絕對定位均可 */
        width:500px;
        height:300px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: pink;         /* 方便看效果 */
}

水平垂直居中三
利用 flex 佈局
實際使用時應考慮兼容性

.container {
        display: flex;
        align-items: center;         /* 垂直居中 */
        justify-content: center;    /* 水平居中 */
}
.container div {
        width: 100px;
        height: 100px;
        background-color: pink;        /* 方便看效果 */
}

6.display有哪些值？說明他們的作用。

block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
none 缺省值。象行內元素類型一樣顯示。
inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
inline-block 默認寬度爲內容寬度，可以設置寬高，同行顯示。
list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
table 此元素會作爲塊級表格來顯示。
inherit 規定應該從父元素繼承 display 屬性的值。

7.position的值relative和absolute定位原點是？

absolute

生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。

fixed （老IE不支持）

生成絕對定位的元素，相對於瀏覽器窗口進行定位。

relative

生成相對定位的元素，相對於其正常位置進行定位。

static

默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。

inherit

規定從父元素繼承 position 屬性的值。

8.CSS3有哪些新特性？

新增各種CSS選擇器（: not(.input)：所有 class 不是“input”的節點）
圓角（border-radius:8px）
多列布局（multi-column layout）
陰影和反射（ShadowReflect）
文字特效（text-shadow、）
文字渲染（Text-decoration）
線性漸變（gradient）
旋轉（transform）
縮放,定位,傾斜,動畫,多背景
例如:transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:

9.請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

一個用於頁面佈局的全新CSS3功能，Flexbox可以把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到佔用可用的空間。
較爲複雜的佈局還可以通過嵌套一個伸縮容器（flex container）來實現。
採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。
它的所有子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。
常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應。
在佈局上有了比以前更加靈活的空間。

10.用純CSS創建一個三角形的原理是什麼？

把上、左、右三條邊隱藏掉（顏色設爲 transparent）

#demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

11.一個滿屏品字佈局如何設計?

簡單的方式：

上面的div寬100%，
下面的兩個div分別寬50%，
然後用float或者inline使其不換行即可

12.css多列等高如何實現？

利用padding-bottom|margin-bottom正負值相抵；
設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它裏面的列沒有設定padding-bottom時的高度，
當它裏面的任一列高度增加了，則父容器的高度被撐到裏面最高那列的高度，
其他比這列矮的列會用它們的padding-bottom補償這部分高度差。

13.經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧？

png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設置的大。

浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

漸進識別的方式，從總體中逐漸排除局部。

首先，巧妙的使用“9”這一標記，將IE遊覽器從所有情況中分離出來。
接着，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

.bb{
  background-color:red;/*所有識別*/
  background-color:#00deff\9; /*IE6、7、8識別*/
  +background-color:#a200ff;/*IE6、7識別*/
  _background-color:#1e0bd1;/*IE6識別*/
}

IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統一通過getAttribute()獲取自定義屬性。
IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超鏈接訪問過後hover樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

14.li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

行框的排列會受到中間空白（回車空格）等的影響，因爲空格也屬於字符,這些空白也會被應用樣式，佔據空間，所以會有間隔，把字符大小設爲0，就沒有空格了。

15.爲什麼要初始化CSS樣式。

因爲瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）

淘寶的樣式初始化代碼：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

16.absolute的containing block(容器塊)計算方式跟正常流有什麼不同？

無論屬於哪種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，然後再判斷：

若此元素爲 inline 元素，則 containing block 爲能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
否則,則由這個祖先元素的 padding box 構成。

如果都找不到，則爲 initial containing block。

補充：

static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
absolute: 向上找最近的定位爲absolute/relative的元素
fixed: 它的containing block一律爲根元素(html/body)，根元素也是initial containing block

17.CSS裏的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？

對於普通元素visibility:collapse;會將元素完全隱藏,不佔據頁面佈局空間,與display:none;表現相同.
如果目標元素爲table,visibility:collapse;將table隱藏,但是會佔據頁面佈局空間.
僅在Firefox下起作用,IE會顯示元素,Chrome會將元素隱藏,但是佔據空間.

18. position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

如果元素的display爲none,那麼元素不被渲染,position,float不起作用,如果元素擁有position:absolute;或者position:fixed;屬性那麼元素將爲絕對定位,float不起作用.如果元素float屬性不是none,元素會脫離文檔流,根據float屬性值來顯示.有浮動,絕對定位,inline-block屬性的元素,margin不會和垂直方向上的其他元素margin摺疊.

19.對BFC規範(塊級格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。）
一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。

20.css定義的權重

以下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，以下例子是演示各種定義的權重值：

/*權重爲1*/
div{
}
/*權重爲10*/
.class1{
}
/*權重爲100*/
#id1{
}
/*權重爲100+1=101*/
#id1 div{
}
/*權重爲10+1=11*/
.class1 div{
}
/*權重爲10+10+1=21*/
.class1 .class2 div{
}

如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現

21.請解釋一下爲什麼需要清除浮動？清除浮動的方式

清除浮動是爲了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面後面的佈局不能正常顯示。

1、父級div定義height；
2、父級div 也一起浮動；
3、常規的使用一個class；

    .clearfix::before, .clearfix::after {
        content: " ";
        display: table;
    }
    .clearfix::after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }

4、SASS編譯的時候，浮動元素的父級div定義僞類:after

    &::after,&::before{
        content: " ";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }

解析原理：
1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;
2) height:0 避免生成內容破壞原有佈局的高度。
3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點擊和交互;
4）通過 content:"."生成內容作爲最後一個元素，至於content裏面是點還是其他都是可以的，例如oocss裏面就有經典的 content:".",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙；
5）zoom：1 觸發IE hasLayout。

通過分析發現，除了clear：both用來閉合浮動的，其他代碼無非都是爲了隱藏掉content生成的內容，這也就是其他版本的閉合浮動爲什麼會有font-size：0，line-height：0。

22.什麼是外邊距合併？

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

23.zoom:1的清除浮動原理?

清除浮動，觸發hasLayout；
Zoom屬性是IE瀏覽器的專有屬性，它可以設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。
譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等。

來龍去脈大概如下：
當設置了zoom的值之後，所設置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這裏一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。

Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom現在已經被逐步標準化，出現在 CSS 3.0 規範草案中。

目前非ie由於不支持這個屬性，它們又是通過什麼屬性來實現元素的縮放呢？
可以通過css3裏面的動畫屬性scale進行縮放。

24.移動端的佈局用過媒體查詢嗎？

假設你現在正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來，
而顯示設備、屏幕投影和打印等這些媒介都有自己的特點，CSS就是爲文檔提供在不同媒介上展示的適配方法

<!-- link元素中的CSS媒體查詢 -->
當媒體查詢爲真時，相關的樣式表或樣式規則會按照正常的級聯規被應用。
當媒體查詢返回假， <link> 標籤上帶有媒體查詢的樣式表 仍將被下載 （只不過不會被應用）。

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 樣式表中的CSS媒體查詢 -->
包含了一個媒體類型和至少一個使用 寬度、高度和顏色等媒體屬性來限制樣式表範圍的表達式。
CSS3加入的媒體查詢使得無需修改內容便可以使樣式應用於某些特定的設備範圍。

<style>
    @media (min-width: 700px) and (orientation: landscape){
      .sidebar {
        display: none;
      }
    }
</style>

25.使用 CSS 預處理器嗎？喜歡那個？

SASS (SASS、LESS沒有本質區別，只因爲團隊前端都是用的SASS)

26.CSS優化、提高性能的方法有哪些？

關鍵選擇器（key selector）。選擇器的最後面的部分爲關鍵選擇器（即用來匹配目標元素的部分）；
如果規則擁有 ID 選擇器作爲其關鍵選擇器，則不要爲規則增加標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）；
提取項目的通用公有樣式，增強可複用性，按模塊編寫組件；增強項目的協同開發性、可維護性和可擴展性;
使用預處理工具或構建工具（gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級）；

23.瀏覽器是怎樣解析CSS選擇器的？

樣式系統從關鍵選擇器開始匹配，然後左移查找規則選擇器的祖先元素。
只要選擇器的子樹一直在工作，樣式系統就會持續左移，直到和規則匹配，或者是因爲不匹配而放棄該規則。

24.margin和padding分別適合什麼場景使用？

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。
margin用於佈局分開元素使元素與元素互不相干；
padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段

25. ::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的作用。

單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。（僞元素由雙冒號和僞元素名稱組成）
雙冒號是在當前規範中引入的，用於區分僞類和僞元素。不過瀏覽器需要同時支持舊的已經存在的僞元素寫法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的僞元素則不允許再支持舊的單冒號的寫法。

想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；
在代碼順序上，::after生成的內容也比::before生成的內容靠後。
如果按堆棧視角，::after生成的內容會在::before生成的內容之上

26. 如何修改chrome記住密碼後自動填充表單的黃色背景？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
}

27. 設置元素浮動後，該元素的display值是多少？

自動變成了 display:block

28. 怎麼讓Chrome支持小於12px 的文字？

1、用圖片：如果是內容固定不變情況下，使用將小於12px文字內容切出做圖片，這樣不影響兼容也不影響美觀。
2、使用12px及12px以上字體大小：爲了兼容各大主流瀏覽器，建議設計美工圖時候設置大於或等於12px的字體大小，如果是接單的這個時候就需要給客戶講解小於12px瀏覽器不兼容等事宜。
3、繼續使用小於12px字體大小樣式設置：如果不考慮chrome可以不用考慮兼容，同時在設置小於12px對象設置-webkit-text-size-adjust:none，做到最大兼容考慮。
4、使用12px以上字體：爲了兼容、爲了代碼更簡單從新考慮權重下兼容性。

29. 讓頁面裏的字體變清晰，變細用CSS怎麼做？

-webkit-font-smoothing: antialiased;

30. font-style屬性可以讓它賦值爲“oblique” oblique是什麼意思？

傾斜的字體樣式

31. `position:fixed;`在android下無效怎麼處理？

fixed的元素是相對整個頁面固定位置的，你在屏幕上滑動只是在移動這個所謂的viewport，
原來的網頁還好好的在那，fixed的內容也沒有變過位置，
所以說並不是iOS不支持fixed，只是fixed的元素不是相對手機屏幕固定的。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

32. 如果需要手動寫動畫，你認爲最小時間間隔是多久，爲什麼？（阿里）

多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

33. `display:inline-block` 什麼時候會顯示間隙？(攜程)

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

34. 什麼是CSS 預處理器 / 後處理器？

預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的複用性，
還有層級、mixin、變量、循環、函數等，具有很方便的UI組件模塊化開發能力，極大的提高工作效率。
後處理器例如：PostCSS，通常被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常做的
是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

其他

除了HTML,CSS我們需要複習之外，還有JS、網絡，框架相關等知識需要複習，關於這些知識點，在github上有一個10000+star的項目，該項目爲我們整理了相當全的知識圖譜。小肆把鏈接放在下面，有需要的同學快去看看吧！

https://github.com/InterviewM...

最後別忘了關注我哦！